58일차[useEffect]

진하의 메모장·2025년 3월 31일

공부일기

목록 보기

60/66

2025 / 03 / 31

오늘 수업 시간에는 React의 기본 hook인 useState 복습과 useEffect를 배웠습니다.
기본적인 개념만 알고 있었고, 사용 방법은 몰랐었는데 수업을 하면서 알아갈 수 있었습니다. API를 가져오기 위해 fetch 함수와 async, await를 사용하였습니다.

💌 useEffect

컴포넌트가 렌더링된 후에 실행되는 함수를 정의할 때 사용합니다.

주로 비동기 작업이나 클린업 작업을 처리하는 데 쓰입니다.
useEffect(() => {
   // 실행될 코드
}, [의존성 배열]);

첫 번째 인수

콜백 함수 — 컴포넌트 렌더링 후 실행되는 코드입니다.

두 번째 인수

의존성 배열 — 언제 useEffect를 실행할지 조건을 설정하는 배열입니다.

1. 동작 원리

컴포넌트 렌더링 후 실행

useEffect의 콜백 함수는 컴포넌트가 화면에 렌더링된 후에 실행됩니다.

렌더링 과정에서 직접 UI에 영향을 미치지 않도록 하기 위함입니다.

렌더링

컴포넌트가 화면에 나타나는 것을 의미합니다.

useEffect 실행

렌더링된 후 비동기 작업이나 사이드 이펙트 코드를 실행합니다.

2. 의존성 배열

두 번째 인수에 사용하여 언제 해당 코드가 실행될지 제어할 수 있습니다.

빈 배열 ([ ])

의존성 배열이 비어있다면, useEffect는 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.

배열에 값이 있는 경우

배열 안에 나열된 값이 변경될 때마다 useEffect가 다시 실행됩니다.

의존성 배열을 제공하지 않은 경우

컴포넌트가 렌더링될 때마다 useEffect가 실행됩니다.

3. 실행 순서

컴포넌트가 렌더링됩니다.

useEffect의 콜백함수가 실행됩니다.(모든 컴포넌트가 렌더링 된 후)

의존성 배열이 변경되면, 다시 useEffect가 실행됩니다.

4. Cleanup 함수

useEffect는 cleanup작업을 처리하는 방법도 제공합니다.

이를 통해 구독 해제, 이벤트 리스너 제거, 타이머 정리 등을 할 수 있습니다.

반환값으로 함수를 제공하면, 함수는 컴포넌트가 언마운트 상태이거나, 의존성 값이 변경될 때 호출됩니다.
useEffect(() => {
  // 사이드 이펙트 코드
  return () => {
    // 정리 작업 (예: 타이머 정리, 이벤트 리스너 제거 등)
  };
}, [의존성 값]);

💌 활용 예시

useEffect를 활용한 다양한 예시입니다.

1. 한 번 실행

컴포넌트 처음 렌더링 시 한 번만 실행

빈 의존성 배열을 전달하면, useEffect는 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.
useEffect(() => {
  console.log("컴포넌트가 처음 렌더링되었습니다.");
}, []);  // 빈 배열 => 처음 한 번만 실행

2. 특정 값 변경

특정 값이 변경될 때마다 실행

useEffect는 특정 값이 변경될 때마다 실행될 수 있습니다.

ex) name이나 nickname이 변경될 때마다 실행하고 싶다면, 의존성 배열에 해당 값을 넣습니다.
useEffect(() => {
  console.log("name 또는 nickname이 변경되었습니다.");
}, [name, nickname]);  // name 또는 nickname이 변경될 때마다 실행

3. 정리 함수

컴포넌트가 언마운트되거나 의존성 값이 변경될 때 cleanup 작업을 할 수 있습니다.

ex) 이벤트 리스너를 제거하거나 타이머를 정리하는 작업입니다.
useEffect(() => {
  const timer = setInterval(() => {
    console.log("타이머 동작 중...");
  }, 1000);

  // Cleanup 함수
  return () => {
    clearInterval(timer);  // 타이머 정리
    console.log("타이머 정리 완료");
  };
}, []);  // 빈 배열 => 처음 렌더링 시에만 타이머 시작

💌 주요 개념 정리

useEffect는 컴포넌트 렌더링 후에 실행됩니다.

의존성 배열을 통해 useEffect의 실행 시점을 제어할 수 있습니다.

빈 배열 : 컴포넌트가 처음 렌더링될 때만 실행합니다.

값을 배열에 넣으면 : 해당 값이 변경될 때마다 실행합니다.

반환되는 함수는 컴포넌트 언마운트, 의존성 배열의 값이 변경될 때 실행되는 cleanup함수입니다.

주의사항

useEffect는 비동기 작업을 다룰 때 매우 유용합니다.

API 호출, 이벤트 리스너 등록/해제, 타이머 설정 등을 처리할 수 있습니다.

의존성 배열을 잘못 설정하면, useEffect가 무한히 실행될 수 있으므로 주의해야 합니다.

API 호출에 들어가기 전에 참고 <- 읽고 오시면 조금 더 이해하기 쉽습니다.

💌 API 호출 핵심 개념

useEffect를 사용해서 API를 호출하기 위해 알고 있어야하는 핵심 개념입니다.

비동기 작업을 처리하기 위해 useEffect와 async/await 구문을 결합하여 실제 API 요청을 보내고, 받은 데이터를 상태(state)에 저장하는 방식으로 작업을 합니다.

1. useState(상태 관리)

useState는 React 훅으로, 컴포넌트의 상태를 관리합니다.

컴포넌트 내에서 변하는 데이터를 저장하고, 데이터가 변할 때마다 UI를 재렌더링합니다.
const [state, setState] = useState(Value);

state

현재 상태 값을 의미합니다.

setState

상태를 업데이트하는 함수입니다.

2. useEffect(부수 효과 처리)

컴포넌트가 렌더링된 후에 비동기, 사이드 이펙트 처리를 도와주는 훅입니다.

주로 API 호출, 타이머 설정, 이벤트 리스너 추가 등을 처리하는 데 사용됩니다.
useEffect(() => { /* 작업 */ }, [의존성 배열]);

첫 번째 인수

콜백 함수로, 렌더링 후 실행할 작업을 넣습니다.

두 번째 인수

의존성 배열로, 배열 안에 있는 값들이 변경될 때마다 useEffect가 다시 실행됩니다.
빈 배열을 넣으면 컴포넌트가 처음 렌더링될 때만 실행됩니다.

3. API 호출과 async/await

API를 호출할 때 비동기 방식으로 데이터를 가져오는 것이 일반적입니다.

async/await 구문을 사용하면 동기 코드처럼 작성되어 가독성 향상, 오류 처리도 용이해집니다.
const getData = async () => {
  try {
    const response = await fetch('URL');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
};

4. 조건부 렌더링

ex) if (!user) 구문을 사용하여 user가 null인 경우, 데이터가 로드되기 전에 "로딩중..."이라는 메시지를 표시하는 방식입니다.

API 호출이 완료될 때까지 사용자에게 로딩 상태를 표시할 수 있습니다.

💌 코드 분석

useEffect를 사용해서 API를 호출하는 것은 React에서 흔히 사용되는 패턴입니다.

작성한 코드를 컴포넌트 별로 분석해보도록 하겠습니다.

1. App.jsx

useEffect와 API 호출 사용

const [user, setUser] = useState(null);

useEffect(() => {
   const getUser = async () => {
      try {
         const response = await fetch("https://randomuser.me/api/");
         const data = await response.json();
         console.log(data);
         setUser(data?.results[0]); // API에서 받은 데이터로 상태 업데이트
      } catch (error) {
         console.log(error); // 오류 처리
      } finally {
         console.log("api호출 완료"); // 호출 후 항상 실행
      }
   };

   getUser(); // 함수 호출
}, []); // 의존성 배열: 빈 배열 => 처음 렌더링될 때 한 번만 실행

useEffect는 컴포넌트가 처음 렌더링된 후 API를 호출합니다.
빈 배열 [ ]을 사용했기 때문에 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.
비동기 함수인 getUser는 fetch를 사용하여 API에서 데이터를 받아옵니다.
await를 사용하여 API 응답을 기다리고, 결과는 setUser를 통해 user에 저장됩니다.
상태가 변경되면 React는 컴포넌트를 다시 렌더링하여 데이터를 화면에 표시합니다.
finally 블록은 API 호출이 완료된 후 항상 실행되며, "API 호출 완료"를 확인할 수 있습니다.

로딩 상태 처리

if (!user) {
   return <p>로딩중..</p>;
}

user가 null일 경우(API에서 데이터를 받기 전), "로딩중..."을 화면에 표시합니다.
데이터가 로드되면 setUser가 실행되어 user 상태가 변경되고, 컴포넌트가 리렌더링됩니다.

2. User.jsx

데이터 표시

export default function User({ user }) {
   return (
      <Container>
         <div>
            <Img src={user.picture.large} /> {/* 이미지 */}
            <h1>이름</h1>
            <p>{user.name?.first} {user.name?.last}</p> {/* 이름 */}
            <h1>이메일</h1>
            <p>{user?.email}</p> {/* 이메일 */}
            <h1>주소</h1>
            <p>{user.location?.country}</p> {/* 주소 */}
            <h1>휴대폰 번호</h1>
            <p>{user.cell}</p> {/* 휴대폰 번호 */}
         </div>
      </Container>
   );
}

User 컴포넌트는 user 객체를 props로 받아서 화면에 출력합니다.
옵셔널 체이닝 (?.)을 사용하여 데이터가 없을 경우, 에러가 발생하지 않도록 접근합니다.
ex) user.name?.first는 user.name이 존재할 때만 first 속성에 접근합니다.

3. 전체 흐름

1. 컴포넌트 라이프사이클 관리

useEffect를 통해 API 호출 시점을 관리하고 있습니다.

API 호출이 UI에 직접적인 영향을 미치지 않도록 비동기적으로 처리됩니다.

2. 비동기 코드 처리

async/await 구문을 사용하여 작업을 동기식으로 다룰 수 있게 되어 가독성이 좋습니다.

fetch API를 사용해 데이터를 가져오고, 이를 상태에 저장하여 렌더링합니다.

3. 조건부 렌더링

if (!user) 조건을 사용하여 데이터를 로딩 중일 때 "로딩중..." 메시지를 표시합니다.

사용자 경험을 개선하는 중요한 부분입니다.

4. 상태 관리

useState를 통해 API로 받은 데이터를 상태로 관리합니다.

상태가 업데이트되면 컴포넌트가 다시 렌더링됩니다.

58일차 후기

최근에 API 호출을 하지 않다가 다시 해보려고 하니까 기억이 안나는 부분이 있기도 하고.. 하는 방법이 헷갈린달까... 그래도 나름 많이 기억하고 있어서 다행이었습니다.

그래도 다시 복습을 해야겠다고 생각했습니다.. 역시 반복 학습이 중요한 것 같습니다.

useEffect에 대해 개념만 알고 있었는데 이번에 사용도 해보니까.. 나름 괜찮았습니다.

useState와 useEffect, 두 가지 모두 React의 기본 훅이기도 하고 사용 빈도가 높다고 하니까 자주 사용해보면서 익숙해지는 시간을 가져야겠습니다. (๑˘ꇴ˘๑)

오늘도 벨로그를 쓰면서 다시 복습할 수 있어서 좋은 것 같습니다~ (,,>ヮ<,,)!

진하의 메모장

૮꒰ ྀི〃´꒳`〃꒱ა

다음 포스트