ES2015(ES6)에 클래스 문법이 도입되면서 리엑트에도 리액트 컴포넌트를 만드는 방법이 도입되었다.
16버전 이후 함수 기반의 컴포넌트를 생성하는 방법이 추가되어, 현재는 함수 기반의 컴포넌트 생성 방법 주를 이루고 있다.
JSX
JSX란?
createElement를 이용해 엘리먼트를 정의하면 복잡하기도 하고 가독성도 좋지 않다. 그래서 리액트팀은 ReactElement를 정의하는 간편한 방법으로 JSX문법을 제공한다. 자바스크립트를 확장한 문법으로, ReactElement를 xml문법 형식으로 정의할 수 있다.
단, JSX는 공식적인 자바스크립트 문법이 아니고, 바벨(babel)이라는 트랜스파일링 툴이 필요하다.
바벨은 ES6 + ES Next 문법을 ES5문법으로 변환해주는 도구이다.
추가로 JSX를 순수 리액트로 변환해주는 기능이 포함되었다.
리액트 랜더링
Constructor
생성자는 최초에 State를 한번 초기화 할 목적으로 사용한다.
Mount 되는 시점에만 호출되고 Update 시점에는 호출되지 않는다.
getDerivedStateFromProps
props값으로 state값을 변경해야 되는 경우가 있는데,
생성자에서 변경하게 되면 그 값을 이용해서 초기화를 하지 못하기 때문에 (update에선 constructor 호출 x )
update에도 호출하는 getDerivedStateFromProps()에서 해줘야 props가 state를 변경해준다.
render
리액트 엘리먼트를 정의한다.
생성자 + props로 state를 갱신할 수 있게끔 하는 메소드 이후에 동작하기 때문에
render 함수 안에서 props나 state 이용이 가능하다.
componentDidMount
랜더링 이후 componentDidMount함수에서 추가적으로 state를 변경하거나 비동기 함수를 호출한다.
랜더링 단계나 랜더링 이전 단계에서 진행하면 state가 return하기전에 값이 변경 > setState() 호출로 재귀호출에 빠지는 형태가 된다.
render이후로 동작할 내용에서 UI를 별도로 DOM을 조작한다거나 이벤트를 등록하거나
setTimeout이나 API를 호출해서 , 그 발생한 정보로 state를 변경할 목적으로 사용한다.
shouldComponentUpdate
update되는 시점에서 props랑 state를 받아서 뭐가 업데이트 됐는지 확인할 수 있고,
그 변경된 내용으로 랜더링을 다시 할건지 말건지를 결정할 수 있다.
