리액트 컴포넌트의 라이프 사이클
- 마운트(Mount): 컴포넌트를 페이지에 처음 렌더링할 때
- 업데이트(Update): State나 Props의 값이 바뀌거나 부모 컴포넌트가 리렌더해서 자신도 리렌더될 때
- 언마운트(Unmound): 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때
useEffect
useEffect는 어떤 값이 변경될 때마다 특정 코드를 실행하는 리액트 훅으로, 컴포넌트가 처음 렌더링될 때 특정 동작을 하거나, 페이지에서 사라질 때 메모리를 정리하는 등 라이프 사이클을 쉽게 제어 가능
하나의 값 검사하기
useEffect(callback, [deps])
- [deps]: 의존성 배열(Dependency Array = deps)
- callback: deps 요소의 값이 변경되면 실행되는 콜백 함수로, State 값을 초기화할 때도 감지됨
function App() {
(...)
useEffect(() => {
console.log("count 업데이트: ", count);
}, [count]);
(...)
}
export default App;
여러개의 값 검사하기
function App() {
(...)
useEffect(() => {
console.log("count 업데이트: ", text, count);
}, [count, text]);
(...)
}
export default App;
useEffect로 라이프 사이클 제어하기
의존성 배열에 아무것도 전달하지 않으면, useEffect는 컴포넌트를 렌더링할 때마다 콜백 함수를 실행
function App() {
(...)
useEffect(() => {
console.log("컴포넌트 업데이트");
});
(...)
}
export default App;
마운트 시점은 제외하고 업데이트 시점에만 콜백 함수 실행하기
function App() {
(...)
const didMountRef = useRef(false);
useEffect(() => {
if (!didMountRef.current) {
didMountRef.current = true;
return;
} else {
console.log("컴포넌트 업데이트");
}
});
(...)
}
export default App;
// Ref 객체는 돔 요소를 참조하는 것뿐만 아니라 컴포넌트의 변수로도 자주 활용됨
컴포넌트의 마운트 제어하기
의존성 배열에 빈 배열 []을 전달하면, 컴포넌트의 마운트 시점에만 콜백 함수를 실행하며, 이를 "컴포넌트의 마운트를 제어한다"라고 표현함
function App() {
(...)
useEffect(() => {
console.log("컴포넌트 업데이트");
}, []);
(...)
}
export default App;
컴포넌트 언마운트 제어하기
클린업
useEffect의 콜백 함수가 반환하는 함수를 클린업 함수라고 하며, 이 함수는 콜백 함수가 실행되기 전이나 컴포넌트가 언마운트하는 시점에 실행 됨
클린업을 이용해 컴포넌트 언마운트 제어하기
의존성 배열에 빈 배열 []을 전달하고, 콜백 함수가 함수를 반환하면 (클린업 함수를 사용하면), 이 함수 (클린업 함수)는 컴포넌트의 언마운트 시점에 실행 됨
function App() {
(...)
useEffect(() => {
return() => {
console.log("컴포넌트 업데이트");
};
}, []);
(...)
}
export default App;
리액트 개발자 도구
리액트 개발자 도구 설치하기
설치 확인하기
1. 'npm run start'로 앱을 실행한 뒤, 크롬 브라우저 우측 상단에 주황색의 리액트 개발자 도구 아이콘이 나타나는지 확인
2. 크롬 개발자 도구를 열고, 탭 메뉴에서 >> 모양의 더 보기 아이콘을 클릭해서, 메뉴에 [Components]와 [Profiler] 탭이 추가되었는지 확인
리액트 개발자 도구의 기능 사용하기
컴포넌트 트리 살펴보기
[Components] 탭은 현재 렌더링된 카운터 앱의 컴포넌트 트리를 시각적으로 보여줌
State 모니터링하기
[Components] 탭에서 실시간으로 변하는 State 값을 모니터링 가능
Props 모니터링하기
[Components] 탭에서 실시간으로 변하는 Props 값을 모니터링 가능
리렌더 하이라이트 기능 사용하기
[Components] 탭 검색 폼 옆에 있는 톱니 모양의 View Settings 아이콘을 클릭해서 열리는 대화상자 [General] 탭에서 "Highlight updates when component render." 의 체크박스에 표시하면, 컴포넌트를 렌더링할 때마다 하이라이트가 나타남
! 리렌더 하이라이트 기능은 [Compoents] 탭이 열려 있어야 확인 가능
