React 16.3 버전 이상부터 몇몇 라이프 사이클이 변경됐다. componentWillMount -> getDerivedStateFromProps componentWillReceiveProps -> getDerivedStateFromProps componentWillUpdate -> getSnapshotBeforeUpdate static getDerivedStateFromProps 특수한 경우에 사용되는 라이프사이클. 라이프사이클 앞부분에 꼭 static을 붙여주어야 하며, return 값이 존재해야 한다. 새로운 state를 설정하는 전용 라이프사이클로 변했다. return 부분에 새로운 state를 선언할 수도 있다. import React from 'react'; class App extends..

이전에 엘리먼트의 렌더링은 동영상의 프레임처럼 한 장면만을 나타낸다고 했다. 그에 따라 새롭게 바뀌는 부분이 있으면 ReactDOM.render()를 통해 재 랜더링을 했어야 했다. Clock 컴포넌트를 완전히 재사용하고 캡슐화하게 되면 스스로 타이머를 설정하고, 업데이트 하도록 만들 수 있다. 캡슐화 먼저 구조부분을 Clock() 함수 컴포넌트로 분리시킨다. 이후, Clock이 타이머를 설정하고 매초 UI를 업데이트 하는 로직을 구성하기 위해선 "State"라는 개념이 필요하다. State props와 유사하지만 비공개이고, 컴포넌트에 의해 완전히 제어되는 요소들이다. props 또는 State가 업데이트 되면 React는 다시 렌더링하게 된다. 정의 방식은 다음과 같다. // 방식 1 class Co..

UI를 재사용 가능한 컴포넌트로 나누어 작성할 수 있다. 자세한 컴포넌트 API 레퍼런스) React.Component – React (reactjs.org) React.Component – React A JavaScript library for building user interfaces ko.reactjs.org 함수 컴포넌트와 클래스 컴포넌트 Hook이란 개념이 개발되기 전에는 함수 컴포넌트에서는 상태와 라이프사이클 개념이 없었는데, Hook이 도입되고나서는 함수 컴포넌트에서도 상태와 라이프사이클을 사용할 수 있어 구분이 모호해졌다. 함수 컴포넌트(Function Component) function Welcome(props) { return Hello, {props.name}; } 컴포넌트는 개념적..

엘리먼트 렌더링 – React (reactjs.org) 엘리먼트는 React 앱의 가장 작은 단위다. const element = Hello, world; 위와 같이 엘리먼트는 화면에 표시할 내용을 기술한다. 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(Plain Object)이며, 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. DOM에 엘리먼트 렌더링하기 Index.html 파일 내부에 다음의 div요소가 있다고 가정하자. React DOM은 별도의 JS, JSX 파일에 정의한 '리액트 컴포넌트'를 위와 같은 HTMLElement에 연결한다. 이것을 루트(root) DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적..

키워드 View를 다루는 JavaScript 라이브러리다. Rendering & Update만을 지원한다. http client와 같은 부가기능은 지원하지 않는다. Component Based Development 독립적인 코드 블럭(HTML + CSS + JS) 컴포넌트가 작업의 단위다. Real DOM이 아닌 Virtual DOM을 사용한다. JSX JavaScript를 확장한 문법으로 JS의 모든 기능이 포함돼있다. React 엘리먼트를 생성한다. CSR과 SSR 모두 구현할 수 있다. JSX 참고) JSX 소개 – React (reactjs.org) JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org JSX..