Back Ground

class 문법 방식1234567891011import React, {Component} from 'react'; class Hello extends Component { render(){ return( Hello {this.props.name} ) }} export default Hello;cs컴포넌트에서 라이프사이클 API과 state를 사용해야 할 때 꼭 사용해야한다. 그런데 만약 라이프사이클 API와 state를 사용할 필요가 없고오로지 props를 전달 받은 뷰를 렌더링하는 역할만 한다면 함수형 컴포넌트를 만들면 더 간단하게 선언할 수 있다. 번거롭게 class를 만들고 render()를 만들지 않아도 된다. 함수형 컴포넌트 순수한 함수만으로 컴포넌트를 선언 할 수 있다. ES5 방식123456..

생명 주기 (Life Cycle) API 모든 리액트 컴포넌트에는 라이프 사이클(생명주기)이 존재한다. 컴포넌트수명은 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.(컴포넌트 생성때부터 페이지에서 빠질때 까지) 가끔 컴포넌트르 처음으로 렌더링할 때 어떤 작업을 처리해야 한다든지컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고,불필요한 업데이트를 방지해야 할때 사용한다. 라이브 사이클 메소드 종류 출처: https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드고,Did 접두사가..

IterationSample.js1234567891011121314import React, { Component } from 'react';class IterationSample extends Component{ render(){ return( 눈사람 얼음 눈 바람 ); }} export default IterationSample;cs 이런식으로 ...를 연속으로 사용 해야 할때 반복 코드를 이용해서 작성해보도록 하겠다 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 랜더링할 수 있다.map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱한 후 그 결과로 새로운 배열 생성한다. 1var new_array = arr.m..

에로우 펀션 에서 프로퍼티 JSON 형태로 사용할때는 ({ label : literal }) 를 사용하여아한다. params => {object:literal}이렇게 했을때 에러가 발생한다. 12var func = () => { foo: 1 }; // func() 호출은 undefined를 반환!var func = () => { foo: function() {} }; // SyntaxError: function 문은 이름이 필요함cs 1func = () => ({ foo: 1 });csfoo는 레이블(라벨)로 인식하게 된다. 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A..

리액트 컴포넌트 안에서는 ID를 사용하면 안된다? 리액트 컴포넌트 안에서도 id를 사용할 수는 있다.JSX안에서 DOM에 id를 달면 해당 DOM을 랜더링할 때 그대로 전달된다. 하지만 특수한 경우가 아니면 권장하지 않는다. 예를 들어 같은 컴포넌트를 여러번 사용 한다고 가정해보면 HTML에서 DOM의 id는 유일해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기는 잘못된 사용입니다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에만 작동하기 때문에 이런 문제가 생기지않는다.대부분은 id를 사용하지 않고도 원하는 기능을 구현할 수 있지만,다른 라이버리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 수 있습니다. ref1ReactDOM.render( ,documnet.getE..

리액트 이벤트 시스템 render(){ return ( 안녕하세요 {this.props.abcd} 여긴 state 값이 출력됩니다. : {this.state.num} { this.setState({ num:this.state.num + 1 }) } }> ) } HTML과 비슷해보이지만 다른 표현 있어서 주의해야 한다. 1. 이벤트이름은 카멜케이스로 작성onclick -> onClickonkeyup -> onKeyUp 2. 이벤트에 실행할 자바스크립트 코드를 전달하는것이 아니라, 함수 형태의 값을 전달HTML에선 더블쿼테이션안에 실행할 코드를 넣지만리액트에선 함수 형태로 전달한다. onclick="event()" -> onClick={event()} 3. DOM 요소에만 이벤트를 설정할 수 있다.DOM요소..

컴포넌트란? 컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 그래서 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다. 이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능을 온전히 수행할 수 있도록 만들어 졌다면 그 모듈 내에서도 재사용이 가능한 단위가 컴포넌트라 할 수 있다. 웹사이트를 구축할 경우 모든 것을 새로 만드는 웹 사이트를 상상조차 할 수 없는게 현실이다. 대부분이 라이브러리, 플러그인, 모듈 그리고 컴포넌트로 재사용이 되는 부분들이 대단히 많다 하겠으며 이를 얼만큼 효과적으로 가장 적합한 어떤 것을 찾고 적용하는 역량이 더 중요해졌다 말할 수 있다. 출처 : https://web..

JSX란 자바스크립트의 확장 문법으로 XML과 비슷하게 생겼다.JSX는 리액트에서 사용하는 방식중 하나이다 JSX12345var a = ( 리액트 스터디 )cs이러한 모습을 하고있는데 javascript에 Xhtml을 넣은 모습이다 이 코드는 리액트에서만 사용가능하기 때문에바벨로 컴포넌트를 트리구조로 정의되어 변환하는데 JS1234567891011121314var a = React.createElement( "div", null, React.createElement( "h1", null, "리액트", React.createElement( "i", null, "스터디" ) ) )cs이렇게 변환 된다. 이게 무슨뜻이냐면 12345React.createElement( "h1", //요소 null, //기능 "..