Section 11 Side Effects 다루기 & useEffect() 훅 활용
TIL1) Side Effect란?
React에서 Side Effect는 현재 함수의 범위를 벗어나 다른 것에 영향을 미치는 작업을 말한다. 여기에는 데이터 가져오기, 외부 서비스에 구독하기, DOM과 상호작용하기, 혹은 수동으로 컴포넌트 상태를 변경하는 작업이 포함된다. 이들은 UI를 렌더링하는 것과 직접적인 관련이 없기 때문에 "부수 효과"라고 불린다.
TIL2) 언제 useEffect를 사용할까?
useEffect 훅은 함수형 컴포넌트에서 Side Effect를 처리할 때 필수적인 도구. 하지만 정확히 언제 사용해야 할까?
데이터 가져오기: 컴포넌트가 처음 렌더링되거나 업데이트될 때 API로부터 데이터를 불러와야 할 경우 useEffect를 사용해야함.
DOM 조작: 이벤트 리스너를 설정하거나, DOM 요소의 속성을 직접 변경해야 하는 경우에 useEffect가 적합.
구독: 외부 데이터 소스(예: WebSocket)에 구독하고, 컴포넌트가 언마운트될 때 이를 정리해야 할 때 useEffect가 라이프사이클을 관리해줌. (이건 내가 추가로 찾아본건데, 사실 이해 잘 안감)
타이머 및 인터벌: 정해진 시간 간격으로 동작을 수행해야 할 때 useEffect를 사용하여 타이머를 설정함. (강의 내에 프로젝트에서 이렇게 했다. 그리고 나도 지난 프로젝트 때 실제로 사용해봤고, 타이머를 설정할때 useEffect 사용해봄 경험이 있어, 반갑게 느껴졌다. 하지만 난 강의처럼 숫자가 띄워지는게 아니라, 알아서 몇초있다 사라지는거였다! 기억나니. 응 난 기억나. (그러겠지 너 프로젝트고 여기가 너 공간인데,,ㅋㅋㅋㅋㅋ 아,, 피곤해 빨리 이어서 해보쟈))
TIL3) 프로젝트 아이디어!
프로젝트에서의 useEffect 사용을 이렇게 하면 좋을것 같다아!!!!
최근 시작한 프로젝트에서 useEffect를 사용해 렌터카 목록을 API로부터 불러오는 작업을 처리하면 되지 않을까? 이 작업은 컴포넌트가 처음 마운트될 때 데이터를 한 번만 불러오도록 했으며, 의존성 배열을 빈 배열로 설정하여 불필요한 API 호출을 방지할 수 있을것 같다.
//API 호출 예시
import { useEffect, useState } from 'react';
function RentalList() {
const [rentals, setRentals] = useState([]);
useEffect(() => {
// API에서 렌터카 목록을 불러오는 함수
async function fetchRentals() {
const response = await fetch('https://api.example.com/rentals');
const data = await response.json();
setRentals(data);
}
fetchRentals();
}, []); // 빈 배열: 컴포넌트 마운트 시에만 한 번 실행됨
return (
<ul>
{rentals.map(rental => (
<li key={rental.id}>{rental.name}</li>
))}
</ul>
);
}
이 코드는 컴포넌트가 처음 렌더링될 때 API로부터 렌터카 목록을 불러오고, 이를 상태로 저장합니다. useEffect의 의존성 배열을 빈 배열로 설정했기 때문에 이 함수는 처음에 한 번만 호출됩니다.
Learned
Side Effect의 의미와 중요성 React에서는 컴포넌트가 데이터를 렌더링하는 것 외에 다양한 외부 작업을 해야 할 때가 있다. 이를 Side Effect라고 부르며, 컴포넌트가 외부 데이터를 가져오거나 DOM 조작, 타이머 설정 등을 필요로 할 때 이러한 작업이 발생. 이러한 Side Effect는 React 컴포넌트의 라이프사이클과 밀접하게 연관되어 있기 때문에 적절한 시점에 Side Effect를 처리하는 것이 중요하다!
useEffect 훅의 강력함 useEffect 훅은 이런 Side Effect를 처리하기 위해 필수적인 도구라는 점을 이번 학습을 통해 다시금 알게 되었다.
프로젝트에서의 적용 예전 프로젝트에서 타이머 설정을 위해 useEffect를 사용한 기억이 생생하게 난다. 타이머가 설정된 후 자동으로 사라지는 동작을 구현한 적이 있는데, 이번 강의에서 다시 그 개념을 접하니 더욱 명확하게 다가왔다.
구체적인 활용 계획 현재 진행 중인 렌터카 프로젝트에서 useEffect를 통해 렌터카 목록을 API로부터 불러오고, 의존성 배열을 빈 배열로 설정해 불필요한 반복 호출을 방지할 계획이다. 이를 통해 사용자 경험을 개선하고, 성능 최적화도 함께 달성할 수 있을 것 같다. 더불어 WebSocket을 활용한 실시간 데이터 업데이트도 이후 프로젝트에서 도전해보고 싶다.
질문거리
Effect 의존성
useEffect에서 중요한 부분 중 하나는 바로 의존성 배열
의존성 배열이 성능에 어떤 영향을 미치는지? 최적화를 위해 의존성 관리를 어떻게 해야 할지?
의존성을 제대로 관리하지 않으면 무한 루프에 빠질 가능성은 없는지?
복잡한 상태 관리를 할 때는 useEffect보다 useReducer 같은 다른 패턴을 사용하는 것이 더 나은지?
