리액트 데이터 관리의 핵심, useState와 useEffect

리액트 애플리케이션에서 "데이터"란 곧 화면의 내용과 사용자 경험을 좌우하는 중요한 자산입니다. 데이터가 변하면 곧장 UI도 바뀌어야 하고, 외부에서 받아오는 정보 역시 적절한 시점에 반영되어야 합니다. 이때 효과적으로 데이터를 관리할 수 있도록 도와주는 것이 바로 useState와 useEffect 훅(Hook)입니다. 이 두 가지는 함수형 컴포넌트의 가장 강력한 도구로, 초보자부터 실전 개발자까지 반드시 마스터해야 할 기본기입니다.

상태(state) 관리의 시작, useState

컴포넌트 내부에서 변하는 값을 어떻게 보관할까요? useState는 값의 저장소를 만들어줍니다. 사용법은 단순합니다. 예를 들어,

const [count, setCount] = useState(0);

위처럼 쌍으로 선언하면 count라는 값을 읽고, setCount로 값을 바꿀 수 있습니다. 이 때 setCount를 호출하면 해당 컴포넌트가 다시 그려져 사용자는 즉시 변화된 화면을 확인할 수 있습니다. 이는 버튼 클릭 수 카운트, 입력창 내용, 토글 상태처럼 다양한 곳에서 사용됩니다.

비동기 데이터와 사이드 이펙트 관리, useEffect

데이터를 서버에서 받아오거나, 브라우저 타이틀을 바꾼다거나, 타이머를 걸 때처럼 컴포넌트의 '화면 표시' 외에 추가로 처리해야 할 작업이 있습니다. 이를 모두 "사이드 이펙트"라고 부릅니다. useEffect 훅은 지정한 작업을 컴포넌트가 렌더링된 뒤 원하는 타이밍에 자동으로 실행해 줍니다.

예를 들어, 컴포넌트가 처음 화면에 나타날 때 한 번 데이터를 가져오고 싶다면 아래처럼 활용합니다:

useEffect(() => {
  // 데이터 불러오기
}, []); // 빈 배열: 한 번만 실행

만약 특정 값이 바뀔 때마다 동작시키고 싶다면 배열 안에 그 값을 넣으면 됩니다.

API와 연동하여 실전 데이터 흐름 구현하기

실제 프로젝트에서는 서버에서 데이터를 받아오는 일이 잦습니다. useEffect와 useState를 조합하면 비동기 데이터 처리도 매우 간결해집니다. 다음은 가장 기본적인 패턴입니다:

const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch('https://api.example.com/items')
    .then((res) => res.json())
    .then((data) => {
      setItems(data);
      setLoading(false);
    });
}, []);

이 구조 덕분에 "데이터를 받아오는 동안에는 로딩 중..." UI를 보여주고, 데이터가 오면 곧바로 화면에 반영할 수 있습니다.

상태와 이펙트, 이렇게 구분하면 쉽다

정리하자면, 컴포넌트가 화면에 보여지는 정보(내부적으로 관리되는 값)는 useState에, 외부 요인으로 달라지거나 추가 작업이 필요한 상황에는 useEffect에 맡기면 됩니다. 두 훅이 서로 보완적으로 작동하는 원리를 익혀두면, 동적인 웹앱 구조를 디자인하는 일이 훨씬 명확해집니다.

특히, useState와 useEffect를 능수능란하게 활용하는 것이 곧 리액트의 실전 감각을 키우는 지름길입니다. 이에 익숙해진다면, 데이터를 다루는 복잡한 상황도 두렵지 않게 될 것입니다.