리액트 훅 useContext / Recoil

useContext 

useContext는 리액트 내장 훅으로 컴포넌트 트리 전체에서 데이터를 쉽게 전달할 수 있게 해줍니다.

일반적으로 로그인한 사용자 정보나 테마 같은 전역 상태를 관리할 때 사용합니다.

useContext를 사용하면 컴포넌트에서 매번 props로 데이터를 전달할 필요 없이 원하는 곳에서 바로 사용할 수 있습니다.

 

장점

• 리액트 기본 기능이라 별도 패키지가 필요 없다.
• 설정이 간단하고 중소형 프로젝트에서 전역 상태 관리를 쉽게 할 수 있다.

단점

• 프로젝트가 커지면 useContext 만으로는 상태 관리를 복잡하게 만들 수 있다.
• useContext 자체는 전역 상태를 관리하는 기능이지 상태 업데이트에 대한 세밀한 제어나 효율적인 리렌더링 처리는 어렵다.

User.jsx 파일에서 UserContext를 생성하고 이를 나중에 Provider로 사용

 

App.jsx에서 Users 컴포넌트(UserCon.Provider) 로 애플리케이션을 감싸서 사용자 정보를 전역으로 사용할 수 있게 한다.

 

 

다른 컴포넌트에서 사용자 이름을 사용하고 싶을 때 useContext 를 사용해서 저장된 값을 가져옵니다.

 

동작 방식

1. User.jsx 에서 UserContext를 만들고 Provider로 상태를 하위 컴포넌트에 전달
2. App.jsx 에서 애플리케이션 전체를 UserContext.Provider로 감싸서 전역 상태를 만듬
3. 다른 컴포넌트에서 useContext를 사용해 user 상태를 가져오거나 업데이트할 수 있음

React Router 함께 사용할 땐

 

BrowserRouter를 감싸고 그 안에서 UserContext.Provider를 사용한다.

 

 

 

---

 

Recoil

Recoil은 리액용 상태 관리 라이브러리로 보다 복잡한 상태를 관리할 수 있도록 합니다.

useContext 보다 더 강력하고 중대형 프로젝트에서 주로 사용됩니다.

useContext  와 차이점은 상태를 아톰(atom) 이라는 단위로 관리하고 상태 간 의존성을 처리하는 데 더 유리합니다.

상태를 더욱 세밀하게 제어할 수 있어서 상태 변경 시 불필요한 컴포넌트 리 렌더링을 방지 할 수 있습니다.

 

장점 

• 상태 간 의존성 관리가 쉽다.
• 상태 업데이트가 일어나는 부분만 리렌더링되어 성능 최적화가 가능하다.
• 복잡한 상태 관리가 필요한 대형 프로젝트에 적합하다.

단점

• 별도의 라이브러리 설치가 필요하다.
• 리액트 기본 기능이 아니기 때문에 배워야한다.

 

 

 

 

 

간단한 프로젝트  = useContext

복잡하고 큰 프로젝트 = Recoil