한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환
📌 라이프사이클이란?
인간에게는 영유아 ~ 아동기 ~ 청소년기 ~ 청년기 ~ 성인기 ~ 노년기가 있음
이러한 생애주기처럼
어떠한 것이 탄생부터 죽음에 이르기까지의 단계를 나누어 놓은 것을 라이프사이클이라고 함
리액트 컴포넌트도 이러한 생애주기가 있음
인간과 단계가 다를 뿐임
Mount(마운트)
컴포넌트가 처음 탄생하는 순간
즉, 화면에 처음 렌더링되는 순간
A 컴포넌트가 Mount되었다,
A 컴포넌트가 화면에 처음 렌더링되었다,
...
Update(업데이트)
마운트 이후 컴포넌트가 다시 렌더링되는 순간
즉, 리렌더링 될 때를 의미
A 컴포넌트가 업데이트 되었다,
A 컴포넌트가 리렌더링 되었다,
...
UnMount(언마운트)
컴포넌트가 화면에서 사라지는 순간
즉, 렌더링에서 제외되는 순간
A 컴포넌트가 언마운트 되었다,
A 컴포넌트가 화면에서 사라졌다,
이 라이프사이클을 이해한다면,
원하는 타이밍에 컴포넌트에 원하는 작업을 실행하도록 할 수 있음
예를 들면,
컴포넌트가 화면에 처음 나타났을 때 즉, 마운트 되었을 때
백엔드 서버에 요청을 보내서 데이터를 불러오는 기능을 만들 거나
컴포넌트가 리렌더링 될 때, 변경된 값이 무엇인지 콘솔에 출력하는 기능을 만들 거나
컴포넌트가 언마운트 되어서 화면에서 사라질 때
컴포넌트가 사용하던 여러 가지 유형의 메모리를 정리하도록 할 수 있음
이렇게 컴포넌트의 라이프 사이클의 단계별로
컴포넌트들이 각각 다른 작업을 수행하도록 만드는 것을 라이프사이클 제어라고 함
그리고 useEffect를 사용하면, 이 라이프 사이클 제어를 쉽게 구현 가능
📌 useEffect 사용하기
사이드 이펙트란?
부수적인 효과, 파생되는 효과로 해석 가능
과식하면 살이 찐다.
➡️ 과식을 했기 때문에 발생하는 파생적인 효과
(살이 찐다 = 사이드 이펙트)
어떠한 동작에 따라 파생되는 효과를 사이드 이펙트라고 함
useEffect란?
리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅
즉, 컴포넌트의 동작에 따라 파생되는 여러 효과
예를 들면, 왼쪽의 동작을 통해, 오른쪽의 사이드 이펙트가 발생하게 제어 하려면,
useEffect를 사용할 수 있음
실습
- 컴포넌트 안에서 useEffect를 호출하고,
- 첫 번째 인수로는 콜백함수
- 두 번째 인수로는 배열
➡️ useEffect는 두 번째 인수로 전달한 배열의 값이 바뀌면,
사이드이펙트로 첫 번째 인수로 전달한 콜백함수 실행
따라서 count(state값)를 넣어주면
useEffect는 count의 값이 바뀔 때마다
첫 번째 인수로 전달한 콜백 함수를 실행하게 됨
콜백함수를 채워줌
- 컴포넌트가 렌더링 될 때 최초로 count 값이 초기화되기 때문에
count: 0출력
(즉, state값을 초기화 할 때도 useEffect가 변화 감지) - 버튼을 클릭해서, count 값을 변경하게 되면, 그때마다 변경된 count 값이 콘솔에 출력
useEffect에 의해서 count값이 변경될 때마다 콘솔에 로그가 출력됨
➡️ useEffect란 훅은, 두 번째 인수로 전달한 배열에 의존
이 배열을 의존성 배열이라고 함
혹은 dependency array
혹은 deps
이 deps에는 값을 여러 개 넣어도 됨
deps에 여러 값을 넣어보기 위해 새로운 state를 만들어봄
임시 폼을 만들고
해당 폼에 입력 시 새로운 state를 업데이트하기 위해,
onChange 임시로 콜백함수를 만듦
(매개변수를 받아오고, 해당 매개변수 값 출력)
UI에서 보면,
이 input 폼에 입력하는 값들은,
코드의 input이라는 state에 보관
그러나 콘솔에는 아무 메시지 뜨지 않음
useEffect의 콜백함수가 실행되지 않았다는 뜻,,,
deps에 count만 들어있기 때문
따라서 input이 바뀔 때 useEffect의 콜백 함수를 실행시키고 싶다면,
➡️ 의존성 배열의 input을 추가
이제 useEffect의 콜백 함수는 count나 input(둘다 state) 중 하나의 값만 바뀌어도
컴포넌트가 리렌더링 되고 콜백 함수 실행
정확히 말하면,
❗ useEffect가 리렌더링을 발생시키는 것은 아니고,
원인
count 또는 input이라는 state가 변경됨
결과
컴포넌트가 리렌더링
이후 dependency 배열을 비교해서
변경이 감지되면 effect 실행
리렌더링이 발생했을 때, 이전 렌더의 값과 비교해서 달라졌으면 effect가 실행
따라서 콜백함수의 console.log 함수도 약간 수정
이후 input의 값이나, count의 값이 바뀔 때 출력이 잘 되는 것 확인 가능
의문🤔 그냥, 이벤트 핸들러에 코드를 추가하면 안 되나?
useEffect를 쓰지 않고,
onClickButton 이벤트 핸들러에서 이 setCount를 호출해서 값을 변경하고,
변경된 값을 console.log로 출력하면 안 되는 건가?
그러면, 변경되기 이전의 값을 콘솔에 출력함
왜냐하면 setCount라는 리액트의 상태 변화 함수는 비동기로 동작함
setCount가 호출되고 완료되기 전에,
console.log로 count값을 출력함으로써, count값이 변경되기 이전의 값을 콘솔에 출력함
따라서,
리액트의 state는 비동기로 업데이트 되기 때문에 변경된 state의 값을 사용해서
사이드 이펙트에 해당하는 부가적인 작업을 진행하려면 useEffect를 이용
📌 useEffect로 라이프사이클 제어하기
리액트 컴포넌트는 라이프사이클을 가짐
1️⃣ 마운트: 탄생
- deps: 빈 배열
➡️ 콜백함수는 이 컴포넌트가 처음 마운트 될 때만 동작
(플러스 버튼을 많이 눌러 보아도, 콘솔 로그는 한 번만 출력)
useEffect는 deps에 있는 값이 변경되어야만 실행되기 때문에
이 콜백함수는 컴포넌트가 처음 마운트될 때 이후에는 다시는 실행되지 않음
따라서 아무리 state의 값(count)을 변경해도,
콘솔 로그가 두 번 이상 출력되지 않음
즉 컴포넌트가 마운트 되었을 때만 최초로 한 번 실행시키고 싶은 코드가 있다면,
이렇게 useEffect를 호출하고 deps로 빈 배열을 전달하면 됨
2️⃣ 업데이트: 변화, 리렌더링
- deps: 생략
➡️ 콜백 함수는 마운트 될 때 한 번 실행, 그리고 컴포넌트가 리렌더링될 때마다 계속 실행
마운트 시점에 마운트와 업데이트가 동시에 한 번 출력되고,
컴포넌트가 리렌더링시키면 업데이트가 계속 콘솔에 출력
그런데 마운트 시점을 제외하고,
업데이트가 되는 순간에만 콜백함수를 실행하고 싶다면
컴포넌트가 마운트되었는지 안 되었는지 체크하는 변수를 useRef를 이용
(Ref 객체는 돔 요소를 참조하는 것뿐만 아니라 컴포넌트의 변수로도 자주 활용됨)
isMount.current가 false라면,
아직 컴포넌트가 마운트되지 않은 상황
➡️ 따라서 isMount의 current 값을 마운트되었단 의미로 true로 바꾼 후 return으로 함수 종료
따라서 처음 마운트 될 때는 콘솔 로그가 출력되지 않음
이후 컴포넌트가 리렌더링 되어서 다시 useEffect의 콜백 함수를 호출하면 콘솔 로그 출력 가능
마운트될 때는 mount만,
업데이트 될 때는 update만 출력되는 것을 확인
이와 같이 컴포넌트의 업데이트 단계에서만 코드를 실행시키고 싶다면,
레퍼런스 객체를 생성해서 flag로 사용하면 됨
3️⃣ 언마운트: 죽음
클린업
특정 함수가 실행되고 종료된 후에, 미처 정리하지 못한 사항을 처리
useEffect의 콜백 함수가 반환하는 함수를 클린업 함수라고 함
클린업을 이용해 언마운트 제어하기
카운터의 넘버가 짝수일 때만 화면에 렌더링될 컴포넌트를 만듦
그리고 컴포넌트를 렌더링하는 부분 추가
따라서 state인 count의 값이 짝수면 Even 컴포넌트 호출, 아니면 맒
그리고 Even 컴포넌트에서
useEffect를 이용해 Even 컴포넌트가 언마운트 되는 시점 제어
- 첫 번째 인수 내 콜백 함수에서, 새로운 함수 return
- deps: 빈 배열
➡️ 콜백 함수가 반환하는 함수를 클린업, 또는 정리 함수라고 함
이 정리함수는 useEffect가 끝날 때 실행됨
지금처럼 deps를 빈배열로 전달하면,
이 useEffect는 마운트가 될 때 실행이 되고,
종료는 언마운트될 때 종료가 되고, 그때가 되면 정리 함수를 호출하게 됨
따라서 Even 컴포넌트가 사라지면, 정리함수가 호출됨
컴포넌트가 마운트 될 때 어떤 데이터를 불러오는 코드를 작성하고,
업데이트 되었을 때 현재 업데이트 된 state의 값들이 정상적인 값인지 검사하고,
마지막으로 컴포넌트가 화면에서 사라질 때 컴포넌트에서 쓰고 있는 메모리를 해제하는 최적화 작업이 가능할 것
