[TIL] 23.07.20 Today I Learned / context API, redux

요약: context API, redux

일시: 23.07.20

장소: 더휴먼컴퓨터아트아카데미

배운 점:

context API

• 리액트 애플리케이션에서 전역 상태를 관리하기 위한 기능을 제공하는 리액트의 내장된 기능
• Context API를 사용하면 컴포넌트 간에 props를 통해 데이터를 계속해서 전달하지 않고도 상태를 관리할 수 있음.
• 어플리케이션의 전역 상태가 여러 컴포넌트에서 필요하거나, 깊은 컴포넌트 트리에서 데이터를 전달해야 할 때 유용

Context API의 핵심 개념

React.createContext()

• Context를 생성하는 함수
• 이 함수를 사용하여 새로운 Context 객체를 생성

Context.Provider

• Context로부터 데이터를 제공하는 컴포넌트
• 이 컴포넌트로 감싸진 하위 컴포넌트들은 해당 Context의 값을 사용

Context.Consumer

• Context에서 데이터를 소비하는 컴포넌트
• Context.Provider로 감싸진 상위 컴포넌트에서 제공된 데이터를 읽어올 수 있음.

// 새로운 Context 생성
const MyContext = React.createContext();

// 데이터를 제공하는 컴포넌트
const MyProvider = () => {
  const data = { username: "사용자명", isAdmin: true };
  return (
    <MyContext.Provider value={data}>
      <App />
    </MyContext.Provider>
  );
};

// 데이터를 소비하는 컴포넌트
const MyComponent = () => {
  return (
    <MyContext.Consumer>
      {(data) => (
        <div>
          <p>사용자 이름: {data.username}</p>
          <p>관리자 여부: {data.isAdmin ? "예" : "아니오"}</p>
        </div>
      )}
    </MyContext.Consumer>
  );
};

 

context API와 redux의 차이점

복잡성과 사용 목적

Context API

리액트에 내장되어 있는 기능으로, 주로 컴포넌트 트리 안에서 전역 상태를 공유하기 위해 사용.

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 props 드릴링을 피하고, 중간 컴포넌트를 건너뛰고 데이터를 전달할 수 있게 해줌.

단순한 상태 공유와 간단한 앱에서 적합.

 

Redux

별도의 라이브러리로, 상태 관리에 특화

복잡한 상태와 액션 로직을 관리하며, 상태가 많이 변하거나 복잡한 상태 전이를 다룰 때 유용

 

성능

Context API

컴포넌트 트리 상위에서 상태가 변경될 때마다 하위 컴포넌트들이 불필요한 렌더링을 수행할 수 있음.

 

Redux

상태의 변경을 더 세밀하게 관리하여, 컴포넌트들이 필요한 경우에만 렌더링되도록 최적화