[React.js 2팀] 9장. 컴포넌트 트리에 데이터 공급하기

 
 

9장. 컴포넌트 트리에 데이터 공급하기

 Context가 무엇인지 알아보고, Context로 [할 일 관리] 앱을 리팩토링하자.

 

 

Context

 Context란 리액트 컴포넌트 트리 전체에 데이터를 공급하는 기능으로, Context를 통해 Props Drilling 문제를 해결할 수 있다. 이때 Context가 데이터를 공급하는 범위를 '같은 문맥'이라고 표현하기도 하는데, 이 문맥이라느 글의 방향을 말한다.

 

 

Props Drilling

 Props Drilling이란 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 중간에 위치한 모든 컴포넌트에 일일히 Props를 전달해야 하는 문제를 말한다. 리액트의 트리 상에서 2단계 이상 떨어져 있는 컴포넌트에는 직접 데이터를 전달할 수 없기 때문이다.

 이런 문제가 발생하면 코드가 복잡해지고 유지보수에 어려움이 생긴다. 따라서 Context를 사용하면, 단계마다 하나하나 Props를 사용하지 전달하지 않고도 컴포넌트 트리 전역에 데이터를 공급할 수 있어 해당 문제가 해결된다.

 

 

 

Props 사용의 장단점

 일반적인 Props를 사용했을 때의 장점은 다음과 같다.

 

- Props는 리액트 컴포넌트가 기본적으로 제공하는 데이터 전달 방법이기 때문에 별도의 설정이 필요하지 않다.

- 데이터의 전달이 부모-자식으로 명시적이기 때문에 데이터의 흐름을 쉽게 추적할 수 있다.

 

 하지만 앞서 말했듯 Props Drilling 문제가 발생하고, Props를 전달하는 컴포넌트가 많아지면 데이터 전달 구조를 파악하고 유지보수하는 것이 어려워진다.

 

 

Context 사용의 장단점

 이때 Context를 사용한다면 생기는 장점은 다음과 같다.

 

- 중간 컴포넌트를 거치지 않고도 데이터를 여러 컴포넌트에 전달할 수 있어 Props Drilling 문제를 해결할 수 있다.

- App의 여러 컴포넌트에서 공통적으로 사용되는 데이터를 중앙에서 관리하고 공급할 수 있다.

- 데이터의 공급과 소비를 명확하게 분리할 수 있어 코드가 깔끔해지고 유지보수가 용이하다.

 

 하지만 Context를 설정하고 사용하는 것에 추가적인 코드 입력 및 구조 설계가 필요하고, 작은 프로젝트에서는 오히려 불필요한 복잡성을 초래하게 될 수도 있다. 또한 Context로 데이터를 공급받는 컴포넌트는 데이터의 흐름이 명확하지 않기에 디버깅이 어려워지는 문제가 생길 수 있다.

 

 

 

ContextAPI

 Context를 만들고 사용하는 리액트 기능으로, createContext, ContextProvider 등이 있다.

 

 

 

Context 구조 분리하기

 

• 초기 구조: App 컴포넌트가 상태 todo와 여러 함수들을 관리하며, TodoContext.Provider가 App의 하위 컴포넌트들에게 상태와 함수를 제공한다. 이때 TodoEditor, TodoList 및 TodoItem 컴포넌트들은 모두 TodoContext.Provider로부터 데이터를 받는다.
• State 업데이트 시 문제: App 컴포넌트의 상태가 변경되면 TodoContext.Provider의 값이 변경되어 하위 모든 컴포넌트들이 리렌더링된다. 또한, TodoEditor, TodoList, TodoItem 컴포넌트들도 모두 리렌더링된다. 이는 불필요한 리렌더링을 유발하게 된다.

 

• Context 분리: TodoStateContext와 TodoDispatchContext로 Context를 나눈다. 이때 TodoStateContext.Provider는 todo 상태만 제공하며,TodoDispatchContext.Provider는 onCreate, onUpdate, onDelete 함수를 제공한다.
• 재설계 후 구조: App 컴포넌트가 TodoStateContext.Provider와 TodoDispatchContext.Provider를 통해 상태와 함수를 각각 나누어 제공한다. TodoEditor와 TodoList는 필요한 데이터만을 각각의 Context로부터 받는다. 또한 TodoItem 컴포넌트는 TodoDispatchContext로부터 필요한 함수만을 받는다.

 

• 서로 다른 Context로 분리된 구조: todo 상태가 업데이트될 때, TodoStateContext.Provider 하위 컴포넌트들만 리렌더링된다. 또한 onCreate, onUpdate, onDelete 등 함수가 변경될 때, TodoDispatchContext.Provider 하위 컴포넌트들만 리렌더링된다. 서로 다른 Context로 분리되어, 불필요한 리렌더링이 발생하지 않는다!
• 효과적인 리렌더링 관리: TodoEditor는 onCreate 함수만 사용하므로, TodoDispatchContext에 의존하게 된다. 또한 TodoList는 todo 상태와 onUpdate, onDelete 함수를 사용하므로, 두 Context에 모두 의존하지만, 리렌더링은 개별적으로 관리된다. TodoItem은 todo와 onUpdate, onDelete를 사용하므로, 관련된 Context에만 영향을 받는다.

 

 

 

리팩토링

 리팩토링이란 사용자에게 제공하는 기능은 변경하지 않되 내부 구조를 개선하는 작업이다.

---

 

Quiz

 

1. 같은 문맥 아래 있는 컴포넌트 그룹에 데이터를 공급하는 기능을 ____라고 부른다.
2. 리액트의 트리에서 2단계 이상 떨어져 있는 컴포넌트에는 직접 데이터를 전달할 수 없다. (O/X)
3. Context를 사용하면 리액트 컴포넌트 계층 구조에서 컴포넌트 간 값을 전달할 때 발생하는 ___ ___ 문제를 해결할 수 있다.
4. 사용자에게 제공하는 기능은 변경하지 않되 내부 구조를 개선하는 작업을 ____이라고 한다.
5. Context는 컴포넌트의 내부 및 외부에서 생성할 수 있다. (O/X)
6. _________ 함수를 호출하면 Context가 공급하는 값을 불러와 사용할 수 있다.
7. Context를 적절히 분리하지 않은 구조에서는 App 컴포넌트의 상태가 변경될 때마다 하위의 모든 컴포넌트들이 ____될 수 있다.

 

 
**코드 작성 문제**
 

1. 다음은 Context를 생성하고 Provider를 사용하는 코드이다. 빈칸을 채워 코드를 완성시켜 보자.

const TodoContext = ____________();

return (
  <TodoContext.______ value={{ todos, addTodo, toggleTodo, deleteTodo }}>
    {________}
  </TodoContext.______>
);

 

  2. MemoContext.Provider를 생성하고 MemoEditor에 전체 메모의 개수(memo.length), 중요표시한 메모의 개수(importantMemos), 완료된 메모의 개수(finishedMemos) Context를 생성하는 코드를 작성해 보자.

 

 

 

콘텍스트

O

프롭스 드릴링

리팩토링

X, 컴포넌트 밖에서만 생성 가능

useContext

리렌더링

const TodoContext = createContext();

return (
  <TodoContext.Provider value={{ todos, addTodo, toggleTodo, deleteTodo }}>
    {children}
  </TodoContext.Provider>
);

  return (
    <MemoContext.Provider>
      <div className="App">

        <MemoEditor onCreate={onCreate} />
        <div>전체 메모 개수 : {memo.length}</div>
        <div>중요표시한 메모의 개수 : {importantMemo}</div>
        <div>완료된 메모의 개수 : {finishedMemo}</div>

      </div>
    </MemoContext.Provider>
  );

---

 

출처: 이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023), 
https://reactjs.winterlood.com/.
Corner React.js 2
Editor: Borybop