라이프사이클
1. 라이프사이클?
- Mount(Like 탄생)
- 컴포넌트가 탄생하는 순간
- 화면에 처음 렌더링 되는 순간
- Update(Like 변화)
- 컴포넌트가 다시 렌더링 되는 순간
- 리렌더링 되는 순간
- UnMount(Like 죽음)
- 컴포넌트가 화면에서 사라지는 순간
- 렌더링에서 제외 되는 순간
라이프사이클 제어 가능
- 컴포넌트의 라이프사이클을 잘 이해하고 있다면, 원하는 타이밍에 컴포넌트에게 어떠한 작업을 실행시키도록 할 수 있음
- Mount에서는 서버에서 데이터를 불러오는 작업
- Update에서는 어떤 값이 변경되었는지 콘솔에 출력
- UnMount에서는 컴포넌트가 사용하던 메모리 정리
2. useEffect
- React 컴포넌트의 사이트 이펙트를 제어하는 새로운 React Hook
- React의 사이드 이펙트
- React에서는 부수적인 효과, 파생되는 효과 정도로 해석 가능
- 컴포넌트의 동작에 따라 파생되는 여러 효과
- 위 사진처럼 useEffect를 이용하면 이런 컴포넌트의 어떠한 값이 변경되었을 때 특정 코드를 실행시키거나 라이프 사이클을 제어할 수 있음
- 계산기 앱으로 useEffect 실습
- App 컴포넌트 안에 useEffect를 호출하고, 첫번째 인수로는 콜백함수, 두번째 인수로는 배열을 넣어줌
- 두번째 인수로 들어간 배열의 값이 바뀌게 되면, 첫번째 인수로 들어간 콜백함수가 실행됨
- 위 예시는 count 값이 변함에 따라 콘솔에 count를 출력
- useEffect의 두번째 인수로 들어간 배열에 의존하므로, 의존성 배열(dependency array - deps)이라고 함
- useEffect의 두번째 인수로 들어간 배열에 input을 추가하면, count뿐 아니라 input값이 변할 때도 콜백함수 실행이 가능
- 값이 변할 때마다 함수를 부르고 싶다면, setCount, setInput 밑에 쓰면 될까?
- 실행해보면 count 값이 +100을 두번 눌러서 200인데, 이전의 값 100을 출력함
- 왜냐하면 React의 상태함수는 setTimeout처럼 호출했지만, 나중에 동작하는 것처럼 비동기적으로 동작하기 때문
- 즉, 값이 변하기 전에 console.log를 호출해놓고, 값이 변하기 때문에 이전의 값이 출력
- 따라서 값이 변하는 동시에 sideEffect를 사용하고 싶다면, useEffect를 사용해야함
- 이를 이해하기 위해서는 실행 컨텍스트의 개념이 필요
3. useEffect로 라이프사이클 제어하기
Mount를 useEffect로 제어하기
- useEffect의 두번째 인자로 오는 배열(deps)에 값을 입력하지 않으면, Mount될 때만 실행됨
- 그 이후에 아무리 State값을 변경하더라도 아무일도 일어나지 않음
Update useEffect로 제어하기
- useEffect의 deps를 생략하면, 값이 변해 리렌더링이 될 때마다 콜백함수가 실행됨
- 만약, mount될 때를 제외하고, 리렌더링될 때만 실행하고 싶다면 useRef를 이용하여 mount가 되었는지 확인하는 변수 isMount = true일 때 콜백함수가 실행하게하면 됨
- isMount가 false면 true로 바꾸고 콜백함수를 끝냄
- isMount가 true면 console.log('Update')가 실행됨
UnMount를 useEffect로 제어하기
- 화면에 나타났다가 사라지는 컴포넌트가 추가로 필요하기 때문에 count가 짝수일 때만 렌더링되는 컴포넌트 Even.jsx를 만듦
- useEffect의 콜백함수가 반환하는 함수를 클린업함수 또는 정리함수라고 함
- 클린업, 정리함수는 useEffect가 끝날 때 실행됨
- 즉, unmount될 때 실행하고 싶으면 클린업함수를 사용하면 됨
4. React Developer Tools
- React Developer Tools를 사용하면 React App이 어떤 Component, State, Props가 있는지, 어떤 Component가 리렌더링되는 지 확인 후 수정할 수 있게 도와준다.
꾸준🐢