React Hooks와 useEffect 사용법 가이드

React Hooks와 useEffect 사용법 안내

React는 근래 매우 인기를 끌고 있는 프론트엔드 라이브러리로, 사용자 인터페이스를 구현하는 데 뛰어난 장점을 지니고 있습니다. 그중 React Hooks는 컴포넌트 내에서 상태(state)와 생명주기(lifecycle)를 더 간편하게 관리할 수 있도록 도와줍니다. Hooks는 React 버전 16.8에 도입되었으며, 클래스 없이도 다양한 기능을 사용할 수 있는 혁신적인 방법입니다. 이번 글에서는 React Hooks의 주요 구성 요소인 useEffect에 대해 자세히 알아보도록 하겠습니다.

Hooks의 개요

Hooks는 함수형 컴포넌트에서 여러 React 기능을 사용할 수 있게 해주는 특별한 함수입니다. 이로 인해 복잡한 클래스 컴포넌트 대신, 더 간편하고 이해하기 쉬운 코드 구조를 유지할 수 있습니다. 그중에서도 useEffect는 부수 효과를 관리하는 데 필수적인 역할을 합니다.

useEffect의 역할

useEffect는 주로 데이터 가져오기, 구독(subscription) 관리, 직접적인 DOM 조작 등과 같은 부수 효과(side effect)를 처리하는 데 사용됩니다. 이전의 클래스형 컴포넌트에서 사용되던 componentDidMount, componentDidUpdate, componentWillUnmount 메서드를 통합하여 하나의 API로 구현한 것이 바로 useEffect입니다.

useEffect 기본 사용법

useEffect의 기본 구문은 다음과 같습니다:

useEffect(() => {
 // 부수 효과로 수행할 작업
});

위의 구문을 사용하면 컴포넌트가 처음 렌더링될 때 및 이후 모든 렌더링 시 해당 작업이 실행됩니다. useEffect는 기본적으로 렌더링 과정이 끝난 직후에 호출되며, 이렇게 함으로써 props와 state에 접근할 수 있습니다.

의존성 배열 사용하기

useEffect의 두 번째 인자로 의존성 배열을 전달할 수 있습니다. 이 배열에 특정 값을 추가하면 해당 값이 변경될 때만 useEffect가 실행됩니다. 예를 들어:

useEffect(() => {
 console.log(name);
 console.log('업데이트 될 때 실행된다');
}, [name]);

위 예제에서 name 값이 변경될 때마다 useEffect가 실행돼 로그를 출력합니다. 배열이 비어 있을 경우, 해당 effect는 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.

부수 효과 해제하기

useEffect 내에서의 작업이 완료되면, 자원을 해제하거나 구독을 취소하는 함수도 반환할 수 있습니다. 다음은 구독을 관리하는 예시입니다:

useEffect(() => {
 const subscription = ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
 // 컴포넌트 언마운트 시 구독 해지
 return () => {
  ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
 };
}, [props.friend.id]);

이 예제에서는 컴포넌트가 언마운트될 때 ChatAPI의 구독을 해제하여 메모리 누수를 방지합니다.

useEffect의 유용성

useEffect는 다음과 같은 다양한 상황에서 유용하게 사용됩니다:

• API 호출 및 데이터 업데이트
• 이벤트 리스너 등록 및 해제
• 타이머 설정 및 정리
• DOM 엘리먼트 조작

이처럼 useEffect는 다양한 부수 효과를 쉽고 효율적으로 관리하는 데 큰 도움을 줍니다.

결론

React의 Hooks, 특히 useEffect는 현대 웹 애플리케이션 개발에서 필수적인 도구로 자리 잡았습니다. 이를 통해 개발자는 컴포넌트를 더욱 직관적이고 간결하게 유지할 수 있으며, 복잡한 상태 관리와 생명주기 로직을 단순화할 수 있습니다.
Hooks의 활용법을 숙지하고, 다양한 상황에 맞춰 적용해 보신다면, React 애플리케이션을 한층 더 발전시킬 수 있을 것입니다.

자주 찾으시는 질문 FAQ