컴포넌트 상태 관리 및 생명주기

상태관리란?

컴포넌트마다 데이터를 직접 관리하는 번거러움을 피하고자 데이터를 리액트에서 중요한 데이터를 자동으로 관리하기 위한 데이터 관리를 말합니다.

간단하게 알아보자면

로컬 상태

특정 컴포넌트 내에서만 데이터를 관리 hook과 props를 사용해 관리합니다. 하지만 어플리케이션의 크기가 점점 커질수록 반복 작업이 늘어나 유지보수가 어려워지는 단점이 있습니다.

전역 상태

프로젝트 전체의 상태관리를 총괄하는 방법입니다 대표적으로 Redux, Zustand가 있습니다 전역에서 관리하기 때문에 컴포넌트 상태 값 반영하고 변경하는 것이 가능 합니다 props 과정이 생략돼 작업이 적고 유지보수가 간편해 지는 장점이 있습니다 하지만 상태관리 오류시 나타나는 사이드 이펙트가 커지는 단점이 존재 합니다.

Zustand

가장 많이 쓰이는 zustand에 대해 알아 보겠습니다. zustand를 사용하면 전역 상태를 저장하는 ‘스토어’를 생성하고, 이 스토어의 상태를 컴포넌트에 필요한 만큼만 가져와서 사용합니다.

생명주기

리액트에서 생명 주기란 특정 컴포넌트의 생성 변경 소멸의 과정을 의미합니다. 생성-mount 변경-update 소멸-unmount 라고 지칭 합니다. 이러한 생명주기 이벤트에 연결할 수 있는 함수들을 생명주기 함수 라고 합니다.

Mount (컴포넌트 생성 시)

컴포넌트가 처음 만들어질 때 실행됩니다.
초기 state 값을 설정하고, 필요한 이벤트를 등록합니다.
전달받은 props 값에 따라 state를 업데이트하거나 초기 렌더링을 처리합니다.
외부 API를 호출해 데이터를 가져오고 state에 저장할 수도 있습니다.

Update (컴포넌트 업데이트 시)

props나 state가 변경되면 실행됩니다.
변경된 부분만 다시 렌더링하여 화면을 갱신합니다.
불필요한 연산을 줄이기 위해, 특정 state가 바뀔 때만 관련된 함수가 실행되도록 처리합니다.

Unmount (컴포넌트 제거 시)

컴포넌트가 화면에서 사라질 때 실행됩니다.
타이머나 인터벌 같은 비동기 작업을 정리해 불필요한 연산을 없앱니다.
window 등 전역 객체에 등록된 이벤트 리스너를 제거합니다.
컴포넌트가 사라질 때 애니메이션이나 전환 효과를 처리할 수도 있습니다.

컴포넌트가 생성, 업데이트, 소멸될 때마다 개발자가 직접 로직을 처리할 수도 있지만, 이런 작업들을 컴포넌트의 생명주기 이벤트에 미리 등록해두면, 각 단계에 맞는 기능이 자동으로 실행됩니다.
매번 이벤트를 직접 관리하면 비효율적이기 때문에, React의 생명주기 함수를 잘 활용해 코드를 작성하는 것이 좋습니다.