1_state & 상태관리

😉 상태관리를 왜 할까요? 

1️⃣ 컴포넌트 간 데이터 공유: 

props 전달만으로는 복잡한 컴포넌트 간 데이터 공유를 효율적으로 처리하기 어렵기 때문에 여러 컴포넌트가 동일한 데이터를 공유해야 할 때 상태 관리가 필요합니다. 

2️⃣ UI 상태 관리:

사용자 입력, API 호출에 따른 데이터 로딩, 조건부 렌더링 등 UI 상태 변경을 효율적으로 관리해야 하기 때문입니다.

3️⃣ 성능 최적화: 

불필요한 렌더링을 방지하고 성능을 최적화하기 위해서 상태관리가 필요합니다.

😊 평소 state 관리는 어떻게 하시나요?

1️⃣ ( 함수 컴포넌트에서 상태를 관리하기 위해 ) useState Hook 사용:

컴포넌트 내부에서 로컬 상태를 관리합니다.

2️⃣ ( 대규모 애플리케이션에서 상태 관리를 위해 ) Redux 사용: 

상태를 하나의 store에서 관리하고, Action과 Reducer를 사용하여 상태를 업데이트합니다.

 

3️⃣ Redux Tookit 사용:

복잡한 리덕스 코드를 간소화하고 효율적으로 상태를 관리할 수 있도록 도와줍니다.

🔥 핵심 키워드 : 리렌더링, 컴포넌트, 로컬 / 지역 상태

상태 관리는 불필요한 리렌더링을 방지하고 유지보수성을 향상시키기 위해 필요합니다. 리액트는 state에 변동이 생길 때에 리렌더링 되어 페이지에 변동을 일으킵니다. 리액트는 단방향 데이터 흐름을 갖고 있기 때문에 컴포넌트가 복잡해지는 경우, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 보내야 하는 깊이가 깊어지는 prop drilling이 발생합니다.

 

애플리케이션의 규모가 커질수록 여러 컴포넌트가 상태를 공유하고 서로의 상태에 의존하기 때문에 효율적인 상태 관리가 필수적입니다. 이를 통해서 예상치 못한 버그를 줄이고 애플리케이션을 보다 예측 가능하게 만들 수 있습니다.

 

평소 state 관리를 위해 redux를 사용하거나 서버 데이터 상태 관리로 react query, 클라이언트측 데이터 상태 관리로 recoil을 사용하곤 합니다.

 

첫 번째로 react-query는 데이터 페치와 관련된 로직을 간소화하고, 캐싱과 리패칭을 자동으로 처리하여 네트워크 요청을 효율적으로 관리할 수 있습니다.

 

비동기 데이터 요청을 처리할 때 매우 간편하고 유용해서 사용하고 있습니다. 리액트 쿼리를 사용할 때 클라이언트 쪽 상태 관리가 필요한 경우엔 recoil을 사용하고 있습니다.

 

사용이 간편하고 복잡한 컴포넌트 트리에서 상태를 관리할 때 유용해서 사용 중입니다. 리덕스는 아직 사용 비율이 가장 높은 라이브러리고 미들웨어를 활용하면 비동기 작업을 처리하는데에도 수월해서 사용을 하곤 하는데, 상태 관리를 위해 많은 보일러 플레이트 코드가 필요하다고 느껴져 최근에는 리액트 쿼리와 리코일을 더 많이 사용 중입니다.