초보 개발자의 성장 일기
useEffect 본문
리액트 훅을 공부하면서부터 어려운 난관에 부딪혀 이 훅을 제대로 공부하지 않으면 앞으로의 프로젝트와 공부에 더 큰 어려움을 겪을 것 같아 더 자세하게, 왜 사용하는지 어떤 점이 좋은지, 어떻게 사용하는건지 더 자세히 알아보기로 했다.
useState로 하는 상태관리에 대해서는 사실 이해가 쉬웠고 사용하고 응용하는데 큰 어려움은 없었다.
하지만 useEffect 부터는 내가 기능을 구현하는 것 뿐만이 아니라 버그도 고치고, 사이드 이펙트가 없는 페이지를 개발해야하니 어디서 어떻게 사용해야하는지 정확히 어려웠다.
컴포넌트의 상태는 세 가지가 있다.
- Mount: 어떠한 컴포넌트가 생겨나는 시점
- Update: 다시 렌더링 되었을 때(상태가 변화했을 때
- Unmount: 컴포넌트가 사라질 때
이 상태에서 특정 코드를 실행하고 싶을 때 useEffect를 사용한다.
인자로 콜백함수를 받는다.
콜백함수란? 다른 함수의 인자로 전된 함수이다.
사용방법
useEffect(() => {})
useEffect에는 두가지 방법으로 사용이 가능하다.
1. 인자로 콜백함수만 받을 때
useEffect(() => {
// 함수
});
: 컴포넌트가 렌더링이 될 때 마다 실행된다.
- 컴포넌트가 화면에 렌더링 될 때
- 컴포넌트가 다시 렌더링 될 때
2. 인자로 콜백함수와 배열을 받을 때
이 때 이 배열은 dependency array라고 한다.
useEffect(() => {
// 함수
}, [값]);
- 화면에 첫 렌더링이 될 때
- 값이 바뀔 때
맨 처음에 화면에 렌더링 될 때, 즉 mount될 때만 실행하고 싶다면 [] 빈 배열을 두번째 인자로 전달한다.
Clean Up
정리라고 부른다.
useEffect안에 서비스를 구독하는 함수를 넣었다고 가정하자.
useEffect(() => {
// 구독 함수
}, []);
이 후에 구독을 해지해 주는 Clean Up, 즉 정리, 종료 작업을 처리 해 주어야 한다.
이 때 return을 사용하여 함수를 넣어준다.
useEffect(() => {
// 구독 함수
return () => {
// 구독 해지 함수
}
}, []);
해당 컴포넌트가 unmount 상태일 때, 다음 렌더링 시 불릴 useEffect가 실행되기 전 return안의 함수가 실행이 된다.
'Development > React JS' 카테고리의 다른 글
useContext (0) | 2023.11.30 |
---|---|
useRef (0) | 2023.11.30 |
Redux (0) | 2023.11.29 |
리액트 상태관리 (0) | 2023.11.27 |
비동기 통신과 Promise (0) | 2023.11.24 |