[React/리액트] useEffect | 리액트 훅(Hook) 사용 방법

 

 

1. useEffect란?

useEffect는 리액트 훅 중 하나로, 컴포넌트가 렌더링 된 후에 실행되는 함수이다. 여기서 "부작용"이란 주로 데이터 가져오기, 화면 갱신 등을 의미한다. 컴포넌트의 상태나 프롭스가 변경될 때마다 useEffect를 사용하여 적절한 작업을 처리할 수 있다.

 

 

 

2. 언제 사용?

웹 애플리케이션은 사용자와 상호작용하면서 데이터가 변하고, 화면을 업데이트해야 할 때가 있다. 이때마다 useEffect를 활용하여 부작용을 처리할 수 있다. 

 

 

 

3. 사용 방법

useEffect의 첫 번째 매개변수에는 부작용을 처리할 함수를 작성한다.

두 번째 매개변수는 의존성 배열이 있는데, 여기에 값을 넣으면 해당 값이 변경될 때만 useEffect가 실행된다.

 

useEffect(() => {
  // 부작용 처리 코드 작성
}, [의존성_값]); //해당 값이 변경될 때만 useEffect가 실행

 

부작용 처리 코드란, 주로 컴포넌트의 렌더링과 관련 없는 작업들을 의미한다.

(예를 들어, 데이터 가져오기, 데이터 저장하기, 외부 API와의 통신, 로컬 저장소 업데이트 등)

 

 

 

4. 데이터 처리, 외부 API와의 통신 예시

  useEffect(() => {

    const fetchItems = async () => {
      try {
        const response = await fetch(API_URL); //fetch 함수를 사용하여 API_URL에서 데이터를 요청
        const listItems = await response.json(); //API 응답을 JSON 형식으로 변환하여 listItems 변수에 저장
        console.log(listItems)
        setItems(listItems)
      } catch (err) {
        console.log(err.stack)
      }
    }
    fetchItems();
  }, [])

반응형

데이터 가져오기

: useEffect 내에서 fetch 함수를 사용하여 외부 API에서 데이터를 가져오고, await response.json()를 통해 데이터를 JSON 형식으로 변환하고 저장한다.

 

데이터 저장하기

: setItems(listItems)를 통해 가져온 데이터를 컴포넌트의 상태로 저장한다. 이로써 컴포넌트가 이후 렌더링될 때 상태에 저장된 데이터를 사용할 수 있다.

 

외부 API와의 통신

: API URL을 사용하여 외부 서버와 통신하며, 데이터를 가져오고 오류를 처리한다. 

 

 

 

 

 

4. 로컬 저장소 예시

useEffect는 데이터 저장소 관리에도 사용된다. 예를 들어, localStorage를 활용해 데이터를 저장하고 싶을 때 유용하게 사용할 수 있다. 데이터가 변경될 때마다 useEffect를 통해 저장소를 업데이트할 수 있다.

useEffect(() => {
  localStorage.setItem("shoppinglist", JSON.stringify(items));
}, [items])

 

위의 코드는 items 배열의 변화를 감지하여 해당 배열이 변경될 때마다 실행된다. items 배열에 변경이 발생하면, localStorage.setItem을 통해 shoppinglist라는 키로 해당 배열을 JSON 형식으로 문자열화하여 로컬 저장소에 저장하게 된다. 이를 통해 앱이 종료되거나 페이지를 새로고침하더라도 사용자의 작업 목록이 유지될 수 있다.

 

 

 

 

 

5. 주의사항

useEffect 안에서 상태를 변경하면 무한 루프에 빠질 수 있으므로, 상태 변경 시 의존성 배열에 해당 상태를 추가해야한다.

useEffect(() => {
  setItems(newItems); // 상태 변경
}, []);

 

위의 코드는 의존성 배열이 빈 상태이므로 컴포넌트가 렌더링될 때마다 useEffect가 호출된다.

이로 인해 무한 루프가 발생할 수 있다.

 

useEffect(() => {
  setItems(newItems); // 상태 변경
}, [items]); // items를 의존성 배열에 추가

 

이를 방지하기 위해 useEffect 안에서 상태 변경이 필요한 경우, 해당 상태를 의존성 배열에 추가해야 한다.