마운트와 렌더링

마운트, 언마운트, 렌더링, 리렌더링

맨날 헷갈려서…

마운트

DOM 객체가 (렌더링을 통해) 생성되어 브라우저에 나타나는 시점

클래스 컴포넌트 기준으로, 생성자가 호출된 후 render() 메서드가 호출되면 마운트가 발생한다

컴포넌트의 생명주기 동안 단 한 번, 처음으로 DOM에 컴포넌트가 추가될 때 수행된다

componentDidMount

클래스 컴포넌트에서의 componentDidMount 메서드는 컴포넌트가 마운트된 직후에 호출되며, API 콜이나 이벤트 리스너 설정 등의 작업을 수행할 수 있다

useEffect

useEffect(() => { ... }, []);

함수 컴포넌트에서의 useEffect() 는 컴포넌트가 마운트됐을 때 최초로 한 번 콜백을 수행한다

의존성 배열에 값을 아무것도 넣지 않을 경우, 해당 useEffect 콜백은 마운트되었을 시점에만 한번 수행된다

언마운트

DOM에서 컴포넌트가 사라질 때, 그 뒷정리를 담당하는 시점

보통 clearInterval, clearTimemout 등 등록된 작업을 제거하는 함수를 호출하거나, 인스턴스를 제거하는 경우에 사용한다

componentWillUnmount

클래스 컴포넌트에서의 componentWillUnmount 메서드는 컴포넌트가 언마운트되기 직전 호출된다 (컴포넌트가 언마운트되고 나면 메서드가 호출될 리 없으므로...)

useEffect

useEffect(() => { return () => { ... } }, []);

useEffect 가 반환값으로 콜백을 가질 때, 해당 콜백은 언마운트 시에 실행된다

렌더링

DOM 객체 생성을 위해 컴포넌트 함수가 호출되는 시점

클래스 컴포넌트에서는 render() 메서드가 호출되는 시점이 된다

렌더링 과정에선 DOM을 어떻게 생성해야 할 지에 대한 지시사항 (JSX 문법의 그것) 이 반환된다

아래의 리렌더링에서도 알 수 있듯, 컴포넌트의 생명주기 동안 여러 번 렌더링이 발생할 수 있다

리렌더링

렌더링된 컴포넌트가 상태값 변화를 겪고 다시 렌더링되는 시점

함수 컴포넌트를 다시 호출하고, 이미 마운트된 컴포넌트에 어떤 변화사항을 적용할지 변경점을 가져오는 과정이다

가상 돔에 변화가 있었을 때, 컴포넌트 2개를 비교하여 차이를 적용시킬 때의 시점이라고 보면 된다

이 작업 중에 리액트는 리액트만의 알고리즘을 통해 DOM에서 필요한 부분 (변경점) 만을 업데이트하여 실제 DOM 조작을 최소화한다

발생 시점

• 컴포넌트의 state가 변경되었을 때
• 받아온 props의 값이 바뀌었을 때
• 부모 컴포넌트가 렌더링 / 리렌더링 되었을 때

useEffect

useEffect(() => { ... });

useEffect가 의존성 배열을 갖지 않을 때 (두 번째 인자로 아무것도 주지 않았을 때) 콜백은 리렌더링 시마다 호출된다

리렌더링 되는 이유가 생각보대 매우 다양하므로 콜백이 실행되는 시점 또한 매우 빈번할 것…

순서

1. 렌더링 (컴포넌트 함수 또는 render() 호출)
2. 마운트 (실제로 DOM에 컴포넌트 등록)
3. 리렌더링 (실제 DOM과 가상 DOM을 비교하여 바뀐 상태값이나 prop 적용 등)
4. 언마운트 (DOM에서 컴포넌트 제거 및 클린업)

결론

마운트: 최초로 컴포넌트가 렌더링되어 DOM에 삽입되는 과정

렌더링: 상태값이나 Props 등에 의해 가상 DOM에 변화가 일어날 때 지속적으로 컴포넌트의 UI를 업데이트하는 과정

마운트는 단 한번 발생하고, 렌더링은 자주 발생함을 상기하자

---

참고 자료

https://kicksky.tistory.com/8

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

https://react.vlpt.us/basic/16-useEffect.html