React Udemy 강의 179번 정리
Side effect면 무조건 useEffect를 써야 한다고 생각했다면 틀렸다.
useEffect는 남용하면 안 된다.
이번 강의의 핵심은 이거다.
1. Side Effect는 맞지만, useEffect가 필요 없는 경우
예시 상황
- 사용자가 place를 클릭함
- 선택한 장소를 state에 추가 → UI 업데이트
- 동시에 localStorage에 선택한 장소 목록 저장 (새로고침해도 유지되게 하기 위함)
function handleSelectPlace(id) {
setSelectedPlaces((prev) => [...prev, id]);
const storedIds =
JSON.parse(localStorage.getItem('selectedPlaces')) || [];
if (storedIds.indexOf(id) === -1) {
localStorage.setItem(
'selectedPlaces',
JSON.stringify([id, ...storedIds])
);
}
}이 코드는 side effect가 맞음.
하지만 useEffect는 필요 없음.
2. 왜 side effect인데도 useEffect를 안 써도 될까?
이 코드는 렌더링 때문에 실행되는 코드가 아니기 때문임.
이 코드는 컴포넌트 렌더링 중에 실행되지 않음.
오직 사용자 클릭 이벤트가 발생했을 때만 실행됨.
즉, 사용자 행동이 있어야 코드가 실행되기 때문에 state를 업데이트해도 무한 루프가 생기지 않음.
3. useEffect가 필요한 경우 vs 필요 없는 경우
useEffect가 꼭 필요한 경우
- 컴포넌트가 렌더링될 때 자동으로 실행되어야 하는 코드
- 렌더링 중 state 변경 → 무한 루프 위험 있는 코드
예를 들면, 위치 정보 가져오는 코드(navigator.geolocation), 서버 데이터 fetch, 렌더 이후 DOM에 접근해야 하는 코드 등등.
즉, 렌더링 → 자동 실행
이 구조일 때 useEffect 필요.
useEffect가 필요 없는 경우
- 사용자 이벤트로만 실행되는 코드
- 버튼 클릭, 리스트 클릭 등
예를 들면, localStorage 저장, 로그 남기기 등등..
즉, 사용자 액션 → 실행
이 구조일 때는 useEffect가 굳이 필요 없음.
4. 중요한 규칙 : Hooks는 어디서나 쓸 수 없다
function handleSelectPlace() {
useEffect(() => {}); // 불가능
}- Hooks는 반드시 컴포넌트 최상단에서만 사용 가능
- 조건문, 반복문, 이벤트 핸들러 안에서는 사용 불가!!
아무튼 이번 예제에서는 애초에 useEffect를 쓸 필요가 없음. 그래서 규칙 위반 문제도 발생하지 않음.
useEffect는 side effect를 관리하기 위한 도구이지
side effect를 무조건 감싸는 도구가 아니다.
useEffect는 렌더링 이후 자동으로 실행되어야 하는 로직에만 사용해야 하며, 사용자 이벤트로만 실행되는 side effect는 이벤트 핸들러 안에서 처리하는 것이 더 바람직하다.
