사이드 이펙트와 useEffect

 

 

 

사이드 이펙트 정리하기 
: 외부에 부수적인 작용 정리 

 

리엑트에서는 useEffect 사용
: 사이드 이펙트를 실행하고 싶을 때 사용한다. 리엑트 외부에 있는 데이터나 상태를 변경할 때 사용한다.

 

사이드 이펙트 예시 
- DOM 노드를 직접 변경
- 브라우저에 데이터를 저장

 

useEffect(() => {
  localStorage.setItem('theme', theme); // 로컬 스토리지에 테마 정보를 저장
}, [theme]);

- 네트워크 요청 

 

useEffect(() => {
  fetch('https://example.com/data') // 외부로 네트워크 리퀘스트
    .then((response) => response.json())
    .then((body) => setData(body));
}, [])

 

- 페이지 정보 변경

 

useEffect(() => {
  document.title = title; // 페이지 데이터를 변경
}, [title]);

- 타이머 

 

useEffect(() => {
  const timerId = setInterval(() => {
    setSecond((prevSecond) => prevSecond + 1);
  }, 1000); // 1초마다 콜백 함수를 실행하는 타이머 시작
  
  return () => {
    clearInterval(timerId);
  }
}, []);

좋은 점
- 동기화에 쓰면 유용하다.

 

동기화 : 컴포넌트 안에 데이터와 리엑트 바깥에 있는 데이터를 일치시킨다.