[React] Context API와 Reducer

React’s Context API

컴포넌트나 컴포넌트 레이어간의 데이터 공유를 용이하게 해주는 리액트 내부 기능으로 useContext 컴포넌트에서 context를 읽고 구독할 수 있게 해줌

기능

컨텍스트 값을 생성하고 해당 값 제공하며 이 컨텍스트를 묶어주는데,

이것은 다수의 컴포넌트 또는 앱의 모든 컴포넌트를 묶어주는 것에 있음

→ 리액트 상태를 해당 컨텍스트 값에 연결하면 앱 전체에 제공되는 방식으로 사용

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

장점

state(상태)와의 연결이 쉬움

• 여러 컴포넌트 레이어를 통해 상태를 전달하거나 상태 업데이트 기능을 전달할 필요 없음
• 상태에 연결된 컨텍스트 값이 앱의 모든 컴포넌트에 제공하므로, 상태 접근이 필요하거나 상태를 변경하거나 읽어야 하는 컴포넌트의 경우 직접적으로 해당 컨텍스트 또는 필요한 상태에 접근이 가능하게 됨

Reducer

React 앱과 Javascript 프로그래밍에서 Reducer란 대개 하나 또는 그 이상의 복잡한 값을 더 단순한 형태로 만드는 함수

Javascript 내 reduce 기능

메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환

• reducer 함수의 4개 인자
  • 누적 값 (콜백의 반환 값으로 첫 번째 호출이면 initialValue가 해당)
  • 현재 값 (처리할 현재 요소)
  • 현재 인덱스 (처리할 현재 요소의 인덱스) → 필수 X
  • 원본 배역(reduce()를 호출한 배열) → 필수 X

[0, 1, 2, 3, 4].reduce(
  function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
  },
);

 

[출처] Udemy React 완벽 가이드 with Redux, Next.js, TypeScript 강의