React | Context API 개념, 사용법, 활용 방법

 

Context란? : Props Drilling의 대안

• Context는 컴포넌트에서 Props를 사용하지 않고 필요한 데이터를 넘겨주는 방식이다.
  특정 데이터를 컴포넌트 트리 전체에 걸쳐 쉽게 공유할 수 있게 해준다.
• Context는 Props Drilling 문제를 해결해 줄 수 있다.
  • Props Drilling : 중첩된 여러 계층의 컴포넌트에게 props 전달.
  • 문제점: 특정 prop을 사용하지 않는 컴포넌트들에게도 해당 prop을 내려주어야 하는 비효율. 가독성 하락. 컴포넌트 결합도 상승으로 불필요한 리렌더링 발생 가능, 코드의 복잡도 증가
• context는 리액트 버전 16부터 사용 가능한 리액트 내장 API로, 어떤 리액트 프로젝트라도 리액트를 import 하면 context를 바로 생성하고 사용할 수 있다.

Prop drilling

 

멀리 있는 자식 컴포넌트에게도, Context를 활용하여 값을 전달해줄 수 있다.

 

사용법 3줄 요약

1. export const MyContext = createContext(defaultValue)을 사용하여 context를 만들고 내보낸다.
2. 이를 useContext(MyContext) 훅에 전달하면 깊이에 상관없이 모든 하위 구성 요소에서 읽을 수 있다.
3. 하위 항목을 <MyContext.Provider value={...}> 로 묶어 부모로부터 제공한다.

 

1. context 생성 : createContext

import { createContext } from 'react';

export const LevelContext = createContext(1);

리액트 패키지에서 createContext라는 함수를 불러와서 만든다.

2. context 사용 : useContext

export default function Heading({ level, children }) {

위와 같이 프롭으로 전달받던 데이터를

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  // ...
}

import 한 context를 통해 값으로 읽을 수 있다.

useContext의 인자에는 createContext로 만든 LevelContext를 넣는다.

useContext : React 컴포넌트의 최상위 수준에서 직접 호출해야 하는 React의 훅 중 하나이다. (반복문, 조건문 내부 호출 불가) useContext를 사용하여 React 컴포넌트가 특정 컨텍스트의 데이터를 읽고자 한다고 리액트에게 전달한다.

 

3. context 제공 : Provider

context provider로 감싸준다.

Context 객체 안에는 Provider라는 컴포넌트가 들어있다. 그 컴포넌트 간에 공유하고자 하는 값을 value라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근을 할 수 있다.

import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

section 안의 컴포넌트가 LevelContext를 요청한다면 이 레벨을 제공하라고 리액트에게 지시하게 된다.

컴포넌트는 그 위의 UI 트리에서 가장 가까운 <LevelContext.Provider>의 값을 사용할 것이다.

 

같은 컴포넌트로부터 context를 use 하고 provide 하기

위의 예시에서 level을 프롭으로 내려줄 필요 없이 다음과 같이 작성할 수 있다.

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Section({ children }) {
  const level = useContext(LevelContext);
  return (
    <section className="section">
      <LevelContext.Provider value={level + 1}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

상위 섹션으로부터 level을 읽어, 자동으로 +1을 하위 컴포넌트에게 전달해 준다.

이 Section 컴포넌트는 useContext(LevelContext)를 사용해 현재 레벨을 가져온다. 

또한 <LevelContext.Provider value={level + 1}>을 사용해 자식 컴포넌트들에게 수정된 레벨 값을 제공한다.

-> 컴포넌트들은 Context를 통해 자신의 "깊이"를 파악하게 된다.

 

 

Context는 중간에 있는 컴포넌트를 통과한다.

context 데이터는 중간에 있는 다른 컴포넌트들을 통과하고 전달된다. <div> 같은 기본 HTML 컴포넌트나 사용자가 직접 만든 컴포넌트 사이에서도 전달된다.

context의 작동 방식은 CSS의 property inheritance와 유사하다. 예를 들어, CSS에서 <div>에 color: blue를 지정하면, 그 안에 있는 모든 요소들은 기본적으로 이 색상을 상속받지만, 다른 요소가 color: green으로 이를 오버라이드할 수 있다. React에서도 상위 컴포넌트에서 제공하는 컨텍스트는 하위 컴포넌트에서 다른 값으로 오버라이드할 수 있다.

또한, 서로 다른 컨텍스트는 서로를 오버라이드 하지 않는다. CSS의 color와 background-color가 서로 다른 속성으로 작동하듯이, createContext()로 만든 각 컨텍스트는 완전히 별개이다. 한 컴포넌트는 여러 다른 컨텍스트를 사용하거나 제공할 수 있으며, 이것들이 서로 간섭하지 않는다.

 

 

활용 사례

 

커스텀 Hook 만들기

만약 Context가 여러 컴포넌트에서 사용되고 있다면, 다음과 같이 커스텀 Hook을 만들어서 사용하는 것도 좋은 방법이다.

const MyContext = createContext();

function useMyContext() {
	return useContext(MyContext);
}

function App() {
	return (
		<MyContext.Provider value="Hello World">
			<AwesomeComponent />
		</MyContext.Provider>
	);
}

function AwesomeComponent() {
	return (
		<div>
				<FirstComponent />
				<SecondComponent />
				<ThirdComponent />
		</div>
	);
}

function FirstComponent() {
	const value = useMyContext();
	return <div>First Component says: "{value}"</div>;
}

// ...

 

 

 

createContext 함수 인자에 기본 값 넣기

만약 자식 컴포넌트에서 useContext를 사용하고 있는데, Provider 컴포넌트로 감싸는 것을 깜빡한다면?

value 값을 지정하지 않았기 때문에, undefined로 아무것도 나타나지 않게 된다.

이런 경우에 기본 값을 설정하고 싶다면, createContext 함수에 인자로 기본 값을 넣어주면 된다.

const MyContext = createContext('default value');

기본 값을 보여주지 않고 아예 오류를 띄우고 싶다면 다음과 같이 커스텀 훅을 수정할 수도 있다.

const MyContext = createContext();

function useMyContext() {
	const value = useContext(MyContext);
	if (value === undefined) {
		throw new Error('useMyContext should be used within MyContext.Provider');
	}
}

 

 

Context에서 상태 관리가 필요한 경우 (유동적인 값을 다뤄야 할 때)

숫자가 보이는 UI와 숫자에 변화를 주는 UI가 완전히 다른 컴포넌트로 분리되어 있고

이를 Props로 함수나 값을 전달하는 것이 아니라 Context를 사용하여 구현하기

먼저, Context에서 유동적인 값을 관리하는 경우에는 Provider를 새로 만들어주는 것이 좋다.

childeren Props를 받아와서 CounterContext.Provider 태그 사이에 넣고, 필요한 기능들을 CounterProvider 컴포넌트 안에서 구현해 주면 된다.

import {createContext} from 'react';

const CounterContext = createContext();

function CounterProvider({ childeren }) {
	return <CounterContext.Provider>{children}</CounterContext.Provider>;
}

function App() {
	return (
		<CounterProvider>
			<div>
				<Value />
				<Buttons />
			</div>
		</CounterProvider>
	);
}

만약 지금과 같이 하나의 상태만 있는 경우라면, useState를 사용하여 만들어진 값과 함수가 들어있는 배열을 통째로 value로 넣는다.

import { createContext, useState } from 'react';

const CounterContext = createContext();

function CounterProvider({ children }) {
	const counterState = useState(1);
	return (
		<CounterContext.Provider value={counterState}>
			{children}
		</CounterContext.Provider>
	);
}

그다음에 useCounterState라는 커스텀 Hook을 만든다.

import { createContext, useContext, useState } from 'react';
//...
function useCounterState() {
	const value = useContext(CounterContext);
	if (value === undefined) {
		throw new Error('useCounterState should be used within CounterProvider');
	}
	return value;
}

이렇게 Hook을 준비해주고 나면, CounterProvider의 자식 컴포넌트 어디서든지 useCounterState를 사용하여 값을 조회하거나 변경할 수 있다.

만약에 데이터를 어떻게 업데이트할지에 대한 로직을 컴포넌트가 아니라 Provider단에서 구현하고 싶으면 다음과 같이 작성할 수도 있다.

import {createContext, useContext, useMemo, useState} from 'react';

const CounterContext = createContext();

function CounterProvider({ children }) {
	const [counter, setCounter] = useState(1);
	const actions = useMemo(
		() => ({
			increase() {
				setCounter((prev) => prev + 1);
			},
			decreaset() {
				setCounter((prev) => prev - 1);
			}
		}),
		[],
	);

	**const value = useMemo(() => [counter, actions], [counter, actions]);**
	
	return (
		<CounterContext.Provider value={value}>{children}</CounterContext.Provider>
	);
}

// 커스텀 Hook
function useCounter() {
	const value = useContext(CounterContext);
	if (value === undefined) {
		throw new Error('useCounterState should be used within CounterProvider');
	}
	rturn value;
}

function App() {
	return (
		<CounterProvider>
			<div>
				<Value />
				<Buttons />
			</div>
		</CounterProvider>
	);
}

function Value() {
	const [counter] = useCounter();
	const <h1>{counter}</h1>;
}

function Buttons() {
	const [, actions] = useCounter();

	return (
		<div>
			<button onClick={actions.increase}>+</button>
			<button onClick={actions.decrease}>-</button>
		</div>
	);
}
export default App;

위 코드에서는 actions이라는 객체를 만들어서 그 안에 변화를 일으키는 함수들을 넣었고, 컴포넌트가 리렌더링 될 때마다 함수를 새로 만드는 게 아니라 처음에 한번 만들고 그 이후에 재사용할 수 있도록 useMemo로 감싸주었다.

value에 값을 넣어주기 전에 [counter, action]을 useMemo로 한번 감싸주었다. useMemo로 감싸지 않으면 CounterProvider가 리렌더링 될 때마다 새로운 배열을 만들기 때문에 useContext를 사용하는 컴포넌트 쪽에서 Context의 값이 바뀐 것으로 간주하게 되어 낭비 렌더링이 발생하게 된다.

 

 

상태가 빈번하게 업데이트될 때 : 값과 업데이트 함수를 두 개의 Context로 분리하기

Context에서 관리하는 상태가 빈번하게 업데이트되지 않는다면, 위 코드만으로도 충분하지만

상태가 빈번하게 업데이트된다면 성능적으로 좋지 않다.

변화가 반영되는 곳은 Value 컴포넌트뿐인데 Buttons 컴포넌트도 리렌더링 되기 때문이다.

Context를 하나 더 만들어서 이를 해결할 수 있다.

import { createContext, useContext, useMemo, useState } from 'react';

const CounterValueContext = createContext();
const CounterActionsContext = createContext();

function CounterProvider({ children }) {
  const [counter, setCounter] = useState(1);
  const actions = useMemo(
    () => ({
      increase() {
        setCounter((prev) => prev + 1);
      },
      decrease() {
        setCounter((prev) => prev - 1);
      }
    }),
    []
  );

  return (
    <CounterActionsContext.Provider value={actions}>
      <CounterValueContext.Provider value={counter}>
        {children}
      </CounterValueContext.Provider>
    </CounterActionsContext.Provider>
  );
}

function useCounterValue() {
  const value = useContext(CounterValueContext);
  if (value === undefined) {
    throw new Error('useCounterValue should be used within CounterProvider');
  }
  return value;
}

function useCounterActions() {
  const value = useContext(CounterActionsContext);
  if (value === undefined) {
    throw new Error('useCounterActions should be used within CounterProvider');
  }
  return value;
}

function App() {
  return (
    <CounterProvider>
      <div>
        <Value />
        <Buttons />
      </div>
    </CounterProvider>
  );
}

function Value() {
  console.log('Value');
  const counter = useCounterValue();
  return <h1>{counter}</h1>;
}
function Buttons() {
  console.log('Buttons');
  const actions = useCounterActions();

  return (
    <div>
      <button onClick={actions.increase}>+</button>
      <button onClick={actions.decrease}>-</button>
    </div>
  );
}

export default App;

기존의 CounterContext를 CounterValueContext와 CounterActionsContext로 분리해 주고, 두 Provider를 모두 사용하고 커스텀 Hook 또한 두 개로 분리.

이제 버튼을 눌러서 상태에 변화가 일어날 때, Value 컴포넌트에서만 리렌더링이 발생한다.

위에서는 상태를 다루는 Context를 활용하는 과정에서 여러 업데이트 함수가 들어있는 actions 객체를 선언하여 별도의 Context에 넣어주는 방식으로 구현을 해주었다.

이 방식 외에도, useReducer를 통해서 상태 업데이트를 하도록 구현하고 dispatch를 별도의 Context로 넣어주는 방식도 있다.

참고 : 아래 링크

How to use React Context effectively

 

 

Context의 상태에서 배열이나 객체를 다루는 경우

화면의 중앙에 문구를 띄우는 모달의 상태를 Context로 작성한다면, 다음과 같이 구현할 수 있다.

const ModalValueContext = createContext();
const ModalActionsContext = createContext();

function ModalProvider({ children }) {
  const [modal, setModal] = useState({
    visible: false,
    message: ''
  });

  const actions = useMemo(
    () => ({
      open(message) {
        setModal({
          message,
          visible: true
        });
      },
      close() {
        setModal((prev) => ({
          ...prev,
          visible: false
        }));
      }
    }),
    []
  );

  return (
    <ModalActionsContext.Provider value={actions}>
      <ModalValueContext.Provider value={modal}>
        {children}
      </ModalValueContext.Provider>
    </ModalActionsContext.Provider>
  );
}

function useModalValue() {
  const value = useContext(ModalValueContext);
  if (value === undefined) {
    throw new Error('useModalValue should be used within ModalProvider');
  }
  return value;
}

function useModalActions() {
  const value = useContext(ModalActionsContext);
  if (value === undefined) {
    throw new Error('useModalActions should be used within ModalProvider');
  }
  return value;
}

이렇게 하면 원하는 곳 어디서든지 다음과 같이 모달을 띄울 수 있다!

const { open } = useModalActions();

const handleSomething = () => {
	open('안녕!');
};

만약 할 일 목록 같은 배열이라면?

import { createContext, useContext, useMemo, useRef, useState } from 'react';

const TodosValueContext = createContext();
const TodosActionsContext = createContext();

function TodosProvider({ children }) {
  const idRef = useRef(3);
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: '밥먹기',
      done: true
    },
    {
      id: 2,
      text: '잠자기',
      done: false
    }
  ]);

  const actions = useMemo(
    () => ({
      add(text) {
        const id = idRef.current;
        idRef.current += 1;
        setTodos((prev) => [
          ...prev,
          {
            id,
            text,
            done: false
          }
        ]);
      },
      toggle(id) {
        setTodos((prev) =>
          prev.map((item) =>
            item.id === id
              ? {
                  ...item,
                  done: !item.done
                }
              : item
          )
        );
      },
      remove(id) {
        setTodos((prev) => prev.filter((item) => item.id !== id));
      }
    }),
    []
  );

  return (
    <TodosActionsContext.Provider value={actions}>
      <TodosValueContext.Provider value={todos}>
        {children}
      </TodosValueContext.Provider>
    </TodosActionsContext.Provider>
  );
}

function useTodosValue() {
  const value = useContext(TodosValueContext);
  if (value === undefined) {
    throw new Error('useTodosValue should be used within TodosProvider');
  }
  return value;
}

function useTodosActions() {
  const value = useContext(TodosActionsContext);
  if (value === undefined) {
    throw new Error('useTodosActions should be used within TodosProvider');
  }
  return value;
}

할 일 항목을 추가할 때는

const { add } = useTodosActions();

const handleSubmit = () => {
  add(text);
}

각 항목을 보여주는 컴포넌트에서는

const { toggle, remove } = useTodosActions()

const handleToggle = () => {
	toggle(id);
};

const handleRemove = () => {
	remove(id);
};

과거에는 위와 같은 작업을 하기 위하여 useReducer을 사용하기도 했지만, 액션/리듀서 방식 굳이? 위와 같은 방식이 더 편할 거다.

 

 

Context가 꼭 전역적일 필요는 없다.

Context에서 다루는 값은 꼭 전역적일 필요가 없다. Context는 재사용성이 높은 컴포넌트를 만들 때도 매우 유용하다!

import { useState } from 'react';

function Item({ active, children, onClick }) {
  const activeStyle = {
    backgroundColor: 'black',
    color: 'white'
  };
  const style = {
    cursor: 'pointer',
    padding: '1rem'
  };
  return (
    <div
      style={active ? { ...style, ...activeStyle } : style}
      onClick={onClick}
    >
      {children}
    </div>
  );
}

function App() {
  const [activeId, setActiveId] = useState(1);
  return (
    <div>
      <Item active={activeId === 1} onClick={() => setActiveId(1)}>
        Hello
      </Item>
      <Item active={activeId === 2} onClick={() => setActiveId(2)}>
        World
      </Item>
      <Item active={activeId === 3} onClick={() => setActiveId(3)}>
        React
      </Item>
    </div>
  );
}

export default App;

active 값을 설정하기 위해서 각 컴포넌트마다 id를 비교하고, onClick도 각 id에 따라 다르게 새로운 함수를 선언하여 설정해 주었다.

이걸 아예 id를 Props로 넣는 방식으로 리팩토링을 한다고 해도 컴포넌트 사용 시 가독성이 그리 만족스럽진 않다.

import { useState } from 'react';

function Item({ activeId, children, onSelect, id }) {
  const activeStyle = {
    backgroundColor: 'black',
    color: 'white'
  };
  const style = {
    cursor: 'pointer',
    padding: '1rem'
  };
  const active = activeId === id;
  const onClick = () => onSelect(id);
  return (
    <div
      style={active ? { ...style, ...activeStyle } : style}
      onClick={onClick}
    >
      {children}
    </div>
  );
}

function App() {
  const [activeId, setActiveId] = useState(1);
  return (
    <div>
      <Item id={1} activeId={activeId} onSelect={setActiveId}>
        Hello
      </Item>
      <Item id={2} activeId={activeId} onSelect={setActiveId}>
        World
      </Item>
      <Item id={3} activeId={activeId} onSelect={setActiveId}>
        React
      </Item>
    </div>
  );
}

export default App;

사용할 때마다 activeId, onSelect Props를 반복적으로 넣어줘야 하는 게 좀 불편하다.

물론 다음과 같이 배열의 map 내장함수를 사용한다면 반복되는 코드는 사라지겠지만, 항목들을 JSX로 명료하게 표현해내지 못한다는 점이 아쉬울 수도 있다.

function App() {
  const [activeId, setActiveId] = useState(1);
  const items = [
    { id: 1, text: 'Hello' },
    { id: 2, text: 'World' },
    { id: 3, text: 'React' }
  ];
  return (
    <div>
      {items.map((item) => (
        <Item
          key={item.id}
          id={item.id}
          activeId={activeId}
          onSelect={setActiveId}
        >
          {item.text}
        </Item>
      ))}
    </div>
  );
}

 

 

→ Context의 해결책!

만약에 항목들을 JSX로 표현하고 싶고, 반복되는 코드들을 정리해주고 싶다면, 이 또한 Context를 사용하여 쉽게 해결할 수 있다!

import { createContext, useContext, useMemo, useState } from 'react';

const ItemGroupContext = createContext();
function ItemGroup({ children, activeId, onSelect }) {
  const value = useMemo(
    () => ({
      activeId,
      onSelect
    }),
    [activeId, onSelect]
  );
  return (
    <ItemGroupContext.Provider value={value}>
      {children}
    </ItemGroupContext.Provider>
  );
}
function useItemGroup() {
  const value = useContext(ItemGroupContext);
  if (value === undefined) {
    throw new Error('Item component should be used within ItemGroup');
  }
  return value;
}

function Item({ children, id }) {
	const activeStyle = {
		backgroundColor: 'black',
		color: 'white'
	};
	const style = {
		cursor: 'pointer',
		padding: '1rem'
	};
	const { activeId,onSelect } = useItemGroup();
	const active = activeId === id;
	const onClick = () => onSelect(id);
	return (
		<div
			style={active ? { ...style, ...activeStyle } : style}
			onClick={onClick}
		>
			{children}
		</div>
	);
}

function App() {
	const [activeId, setActiveId] = useState(1);
	const [anotherActiveId, setAnotherActiveId] = useState(4);

	return (
		<div>
			<ItemGroup activeId={activeId} onSelect={setActiveId}>
				<Item id={1}>Hello</Item>
				<Item id={2}>World</Item>
				<Item id={3}>React</Item>
			</ItemGroup>
			<hr />
			<ItemGroup activeId={anotherActiveId} onSelect={setAnotherActiveId}>
				<Item id={4}>Bye</Item>
        <Item id={5}>World</Item>
        <Item id={6}>Context</Item>
      </ItemGroup>
    </div>
	);
}

export default App;

필요한 값과 함수를 매번 Props로 넣어주는 대신, ItemGroup이라는 Provider 컴포넌트를 만들어서 해당 컴포넌트에만 한번 넣어주고, Item에서 Context를 읽어와서 값을 사용하도록 만들어주었다.

비록 작성해야 할 전체적인 코드는 조금 늘었지만, Item 코드를 사용하는 쪽에서는 훨씬 가독성 높고 편하게 작성할 수 있고 재사용성 또한 좋아졌다.

이렇게, Context를 꼭 전역적인 값을 위해서만 쓰는 게 아니라 Props가 아닌 또 다른 방식으로 데이터를 전달하는 것이라는 접근을 하여 사용한다면 다양한 상황에 유용하게 쓸 수 있다!

 

 

전역 상태 관리 라이브러리는 언제?

과거에는 리액트의 Context가 굉장히 불편해서 전역 상태 관리 라이브러리를 사용하는 것이 당연시 여겨지곤 했지만 이제는 사용하기 편해져서 단순히 전역 상태를 위해서라면 사용하지 않아도 된다.

단, “상태 관리 라이브러리”와 Context는 완전히 별개의 개념임을 잘 알아야 한다. Context는 전역 상태를 관리할 수 있는 수단일 뿐이고, 상태 관리 라이브러리는 상태 관리를 더욱 편하고 효율적으로 할 수 있게 기능을 제공해 주는 도구이다.

Redux

• 액션과 리듀서 개념을 사용하여 상태 업데이트 로직을 컴포넌트 밖으로 분리
• 상태가 업데이트될 때 실제로 의존하는 값이 바뀔 때만 컴포넌트가 리렌더링 되도록 최적화
• Context를 쓴다면 각기 다른 상태마다 Context를 만들어주어야 하는데 이 과정 생략 가능

MobX

• Redux와 마찬가지로 상태 업데이트 로직을 컴포넌트 밖으로 분리
• 함수형 리액트 프로그래밍 방식 도입하여 mutable 한 상태가 리액트에서도 잘 보이게 하고
• 상태 업데이트 로직을 더욱 편하게 작성, 최적화도 잘해준다

Recoil, Jotai, Zustand

• Context를 일일이 만드는 과정 생략
• Hook 기반으로 편하게 전역 상태 ㅗ간리
• 최적화 기능

→ 전역 상태 라이브러리는 결국 상태 관리를 좀 더 쉽게 하기 위해 사용하는 것이며, 취향에 따라 선택해서 쓰면 된다.

 

 

 

ref

https://react.dev/learn/passing-data-deeply-with-context

Passing Data Deeply with Context – React

https://velog.io/@velopert/react-context-tutorial

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법