Today I Learned

리액트의 가상돔, component, class

리꾸엘메 2022. 3. 20. 03:34

HTML은 트리구조의 dom이다. 

리액트는 DOM을 잘게 쪼개서 여러개의 component로 만들어 웹을 구성한다. 

리액트에서는 JSX문법을 사용하는데, JS안에 HTML이 포함되어 있는 형태이다. 

어떤 구조의 웹에서는 변화가 생길 때마다 DOM에서 불필요한 연산이 많이 이루어져 성능이 떨어진다. 

그래서 리액트에서는 메모리에서만 존재하는 가상DOM을 만들었다. 

웹에서 어떤 동작을 하면 가상DOM에 변화가 반영되고 그 중 바뀐 부분만 실제 DOM으로 바꿔주는 방식이다. 

여러개의 component로 구성되어 있기 때문에 update가 이루어진 component만 바꿔주는 것이다. 

component는 크게 두 가지 방식이 있다. 

 

class형과 function형으로 현재 리액트의 공식문서에는 함수형을 쓰도록 명시한다. 

하지만 class형의 라이프사이클 함수가 component의 라이프사이클을 명확히 보여주기 때문에, 알아둘 필요가 있다.

component의 라이프사이클은 크게 생성-수정-제거의 단계로 나뉜다. 

 

 

생성: 처음 component를 불러오는 단계
 
수정: props가 바뀔 때 state가 바뀔 때, 부모 component가 렌더링할 때, 강제 업데이트가 이루어질 때

삭제: 해당 component가 화면에서 사라질 때 (사용자의 행동, 페이지 이동 등)

class형의 라이프사이클함수는 생성-수정-삭제 단계를 거치며 호출되는 함수이다. 

1. constructor() : 생성자 함수, 해당 component의 props와 state를 선언(?)한다. 

2. render() : component의 모양을 정의한다. (마치 HTML같은) 리액트 요소를 return에 넣어 반환한다.

3. componentDidMount() : 마운트(component가 화면에 나타남)가 완료된 후 실행된다. 

4. componentDidUpdate(prevProps, prevState, snapshot) : 리렌더링이 완료된 후 실행된다. 
prevProps, prevState는 업데이트 전의 Props, State를 말한다. 

5. componentWillUnmount() : 컴포넌트가 제거되기 전 마지막에 실행된다. 

라이프사이클함수는 component의 라이프사이클에 따라 1 - 2 - 3 - 변화 - 2 - 4 - 5의 과정으로 실행된다.