9.1.2_사이드 이펙트를 다루는 useEffect

[sryung1225]

📝 #28 이슈와 연관

❓ "사이드 이펙트를 다루기 위해 사용하는 훅은 useEffect다." 라는 문장의 근거를 설명해주세요. React에서의 사이드 이펙트는 무엇인가요?

[sryung1225]

💊 side-effect = 부작용

프로그래밍에서 side-effect

함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 사이드 이펙트라고 합니다. 이런 외부와의 상호작용은 프로그래밍의 다른 부분에 영향을 미칠 수 있습니다.

React에서 side-effect

React의 렌더링 흐름에 영향을 줄 수 있는, React 자체 제공 기능이 아닌 모든 외부 기능을 사용하는 행위를 포함합니다.

외부 기능 예시)

• fetch() 메서드 등을 통한 네트워크 통신 요청 행위
• Local Storage 등에 데이터를 저장하는 행위
• DOM을 직접 조작하는 행위
• setTimeout, setInterval 등의 타이머를 설정하는 행위

React에서 side-effect를 다루기 위해 사용하는 훅 : useEffect

사이드 이펙트가 React 컴포넌트 내부에서 발생하면 React 컴포넌트 렌더링에 예상치 못한 영향(side-effect)를 미칠 수 있습니다. 때문에 컴포넌트 내부에서 직접적으로 사용하지 않고, 렌더링이 완료된 후 수행되는 useEffect 안에서 사이드 이펙트를 사용합니다.

const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data'); // side-effect
    const result = await response.json();
    setData(result);
  };
  fetchData();
}, []);

---

정리하자면 useEffect는 React 컴포넌트 렌더링에 영향을 미치지 않으면서 React 외부의 기능을 사용할 때 사용되는 훅입니다.