6장 라이프 사이클과 리액트 개발자 도구

리액트 컴포넌트의 라이프 사이클

　리액트 컴포넌트는 태어나고 사라지는 생애주기가 있다. 이를 라이프 사이클이라고 한다. 리액트 컴포넌트의 라이프 사이클은 크게 3단계로 구분한다. 리액트 컴포넌트의 라이프 사이클은 크게 마운트(Mount, 탄생), 업데이트(Update, 갱신), 언마운트(Unmount, 사망)로 구분한다.
　라이프 사이클을 이용하면 컴포넌트가 처음 렌더링될 때 특정 동작을 하도록 만들거나, 업데이트할 때 적절한지 검사하거나, 페이지에서 사라질 때 메모리를 정리하는 등 여러 유용한 작업을 단계에 맞게 할 수 있다. 이를 라이프 사이클 제어(Lifecycle Control)라고 한다. 리액트 훅의 하나인 함수 useEffect를 이용하면 이 사이클을 쉽게 제어할 수 있다.

useEffect

　함수 useEffect는 어떤 값이 변경될 때마다 특정 코드를 실행하는 리액트 훅이다. 이를 “특정 값을 검사한다.”라고 표현한다. useEffect를 이용하면 컴포넌트의 State값이 바뀔 때마다 값을 콘솔에 출력하게 할 수 있다.

하나의 값 검사하기

　useEffect의 사용법은 다음과 같다.

useEffect(callback(콜백 함수), [deps](의존성 배열))

　두 번째 인수로 전달한 배열을 의존성 배열(Dependency Array, deps)이라고 하는데, useEffect는 이 배열 요소의 값이 변경되면 첫 번째 인수로 전달한 콜백 함수를 실행한다. 콜백 함수는 콘솔에 const 문자열과 함께 변경된 state 값을 출력한다.

여러 개의 값 검사하기

　useEffect의 의존성 배열 요소가 여러 개 있어도 마찬가지이다. 즉, 배열 요소 중 하나가 변경되어도 useEffect는 콜백 함수를 실행한다.

useEffect로 라이프 사이클 제어하기

　컴포넌트의 3단계 라이프 사이클 중 업데이트(Update)가 발생하면 특정 코드를 실행하게한다. 두 번째 요소인 의존성 배열에 아무것도 전달하지 않으면, useEffect는 컴포넌트를 렌더링할 때마다 콜백 함수를 실행한다. 세 번에 걸친 문자열 출력은 컴포넌트를 처음 페이지에 렌더링하는 마운트 시점 한 번과 컴포넌트를 리렌더하는 업데이트시점 두 번의 결과이다.
　이번에는 useEffect에서 마운트 시점은 제외하고 업데이트 시점에만 콜백 함수를 실행해본다. 즉, 페이지에 처음 렌더링할 때는 콜백 함수를 실행하지 않고 리렌더될 때만 실행하겠다는 뜻이다. 이를 위해 함수 useRef도 이용한다.

컴포넌트의 마운트 제어하기

　컴포넌트의 마운트 시점에 실행되는 코드를 작성해본다. 이를 “컴포넌트의 마운트를 제어한다.” 라고 표현한다.

컴포넌트 언마운트 제어하기

　라이프 사이클의 마지막 단계인 언마운트는 컴포넌트가 페이지에서 제거될 때이다. 컴포넌트 언마운트 시점에 필요한 코드 실행 방법을 살펴본다.

클린업
　리액트 컴포넌트의 언마운트 시점을 제어하기 위해서는 먼저 클린업(Cleanuo) 기능을 이해애햐 한다. 클린업이란 원래 ‘청소’라는 뜻인데 프로그래밍에서 이 개념은 특정 함수가 실행되고 종료된 후에, 미처 정리하지 못한 사항을 처리하는 일이다.
　useEffect의 콜백 함수가 또 다른 함수를 반환하는 클린업 기능을 이용하면 인터벌같이 종료 이후에도 남아 있는 작업을 청소할 수 있다.

클린업을 이용해 컴포넌트 언마운트 제어하기
　현재 카운터 앱은 페이지에 렌더링한 컴포넌트를 사라지게 하는 기능이 없기 떄문에 언마운트를 제어할 수 없다. 따라서 카운터 앱에 컴포넌트를 하나 새롭게 만든다. 이 컴포넌트는 count 값이 짝수면 특정 문자열을 페이지에 렌더링한다.

리액트 개발자 도구

　리액트 앱을 개발할 때 매우 유용하게 사용하는 리액트 개발자 도구(React Developer Tools)를 알아보자.

리액트 개발자 도구의 기능 사용하기

　컴포넌트 트리는 리액트 개발자 도구에서 가장 많이 사용하는 가능이다. [Components] 탭은 현재 렌더링괸 카우터 앱의 컴포넌트 트리를 시각적으로 보여준다. 컴포넌트 트리를 보면 App를 루트 컴포넌트로 하여 그 아래에 Viewer, Even, Controller 3개의 자식 컴포넌트가 있는 것을 볼 수 있다.