React :: 가상DOM(VCOM), 생명주기, HOOKS

Virtual DOM 

리액트는 Virtual DOM을 사용하여 컴포넌트에 변화가 있을 때 새로 그려준다.

변화가 있는 UI를 리렌더링하여 Virtual DOM을 생성하여, 실제 DOM과 비교 후, 바뀐 부분만 다시 그려준다.

즉 리렌더링이 일어나는 모든 부분을 다시 그려주는 것이 아니라, 변화가 있는 부분을 다시 그려주기 때문에,

매우 효과적으로 업데이트 할 수 있다.

 

 

React의 생명주기

projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mounting (컴포넌트가 만들어지고 DOM에 삽입될 때)

 render() : 보통 JSX를 사용하여 생성된 React Element를 반환한다.

render함수는 순수함수여야한다. 즉 호출될 때마다 동일한 결과를 반환해야한다.

컴포넌트의 state를 변경하지 않으며, 브라우저와 직접적으로 상호작용하지 않는다.

브라우저와 상호작용이 필요한 경우 componentDidMount()나 다른 메서드를 사용한다.

 

 constructor() : state 초기화. 

 

 compoenetDidMount() : 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후 호출된다.

DOM 노드가 필요한 초기화 작업은 여기에서 이루어진다.

외부데이터를 불러오거나 비동기 작업이 필요한 경우 사용된다.

데이터 구독 후 componentWillUnmount에서 구독 해제작업을 수행해야한다.

 

이 메서드 내에서 setState를 호출할 경우, 추가적인 렌더링이 이루어진다. 사용자는 그 과정을 볼 수 없지만 성능 문제로 이어지기 쉬우므로 주의가 필요하다.

 

Updating

 componentDidUpdate() : 갱신이 일어난 직후 호출된다. (최초 렌더링에서는 호출되지 않는다.)

이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업도 이 메서드에서 이루어지면 된다 .

 

이 메서드 내에서 setState를 호출하는 경우, 조건문으로 감싸지 않는다면 무한 반복이 발생할 수도 있다.

 

Unmounting (컴포넌트가 DOM에서 해제될 때)

 componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.

이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행한다.

 

 

 

 

HOOKS

 useState : state 초기화를 위해 constructor 대신 사용할 수 있다.

 

 useEffect: componentDidMount, componentDidUpdate, componentWillUnmount를 합쳐놓은 메서드이다.

마운트와 업데이트 다음에 사용되는 것이므로 렌더링된 이후 매번 수행된다.

 

하지만 수행될 필요가 없는 경우 두번째 인수를 지정해주므로 해결할 수 있다.

useEffect의 첫번째 인수로는 수행할 함수를, 두번째 인수로는 배열을 받는다.

이 배열 안의 값(prop, state)이 변할 때에만 effect가 실행된다.

(이 두번째 인수는 effect가 의존하고 있는 값이므로 dependency라고도 부른다.)

 

effect를 실행하고 정리하는 과정을 한번만(마운트와 마운트 해제시) 실행하고 싶다면 빈 배열([ ])을 사용하면 된다.

이렇게 사용하면 effect 안의 prop과 state는 초깃값을 유지하게 된다.

 

 

 

참고
reactjs.org/docs/
https://brunch.co.kr/@eight-two-five/14