[코드잇 스프린트 풀스택 4기] 리액트(React)의 렌더링 방식
·
개발이야기/웹개발
리액트 렌더링이란컴포넌트의 props와 state를 기반으로 UI를 구성하고 이를 통하여 어떤 DOM결과물을 브라우저에게 제공할 것인지 계산하는 일련의 과정 리액트에서 렌더링이 일어나는 경우최초 렌더링리렌더링클래스형 컴포넌트의 setState가 실행되는 경우클래스형 컴포넌트의 forceUpdate가 실행되는 경우함수형 컴포넌트의 useState의 setter가 실행되는 경우함수형 컴포넌트의 useReducer의 dispatch가 실행되는 경우컴포넌트의 key props가 변경되는 경우props가 변경되는 경우부모 컴포넌트가 렌더링되는 경우 리액트 렌더링 과정컴포넌트 트리의 최상단 루트로부터 아래로 내려가며 업데이트가 필요한 컴포넌트를 찾는다.업데이트가 필요한 컴포넌트를 만나면 클래스형 컴포넌트는 클래스 ..
[코드잇 스프린트 풀스택 4기] 리액트(React) 컴포넌트
·
개발이야기/웹개발
리액트 컴포넌트의 정의와 특성- 리액트 애플리케이션을 구성하는 최소 단위를 말한다.- view를 독립적으로 관리하고 재사용할 수 있다.- props를 입력받고 state를 정의하여 DOM을 렌더링한다.- 컴포넌트는 대문자로 시작한다. 리액트 컴포넌트의 종류초기에 클래스형 컴포넌트를 주로 사용하였으나 사용의 불편이 있어 나온 것이 함수형 컴포넌트이며 이 과정에서 hook이 개발됨 1. 클래스형 컴포넌트(Class Component)- 클래스의 형태로 컴포넌트를 정의- 코드내에서 Lifecycle과 state 기능 구현 2. 함수형 컴포넌트(Stateless Functional Component)- 함수의 형태로 컴포넌트를 정의하고 export와 import를 통해 사용- hook을 사용하여 라이프사이클과 ..