React - useContext에 대하여

useContext

 

리액트는 여러개의 컴포넌트로 이루어져있다.

이때 위에서 아래로 컴포넌트 트리를 형성하게 된다.

이때 상위에 있는 데이터를 하위 컴포넌트에게 전달하려면 일일이 props로 전달해줘야만한다.

 

이는 너무 복잡하다.

 

React는 이를 위해서 Context API라는 것을 지원한다.

 

Context는 앱 안에서 사용되는 전역적인 데이터들을 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다.

 

 

Context를 상위에서 정의하고 하위 컴포넌트들은 useContext를 통해 접근한다.

 

Context는 꼭 필요할 때만 쓴다!

위 설명으로 Props는 필요없는게 아닌가 할 것이다.

하지만 Context를 사용하면 컴포넌트를 재사용하기 어려워 진다.

 

리액트 공식문서에서는 

Context를 사용하는 이유가 Prop drilling을 피하기 위한 목적이라면

컴포넌트 합성(Component Composition)을 먼저 고려하는 것이 좋다고 한다.

 

 

간단 사용법

최상위 컴포넌트

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

 

자식 컴포넌트

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

 

 

응용 사용법

context/TaskProvider.jsx

import { createContext, useContext, useStete } from 'react'

// 컨텍스트 만들기 - 컨텐스트의 내용을 provider을 만들어 채움
const TaskContext = createContext()

//컨슈머 - 편하게 사용하기위해 커스텀 훅처럼 작성, 원래는 컴포넌트마다 아래와 같이 호출하면됨
export const useTasks = () => useContext(TaskContext)

const TaskProvider = ({ children }) => {
  const [tasks, setTasks] = useState({})

  const addTask = content => {
    ...
  }

  const updateTask = (id, status) => {
    ...
  }

  const removeTask = id => {
   ...
  }
  return (
    <TaskContext.Provider value={{ tasks, addTask, updateTask, removeTask }}>
      {children}
    </TaskContext.Provider>
  )
}

export default TaskProvider

App.jsx

import styled from '@emotion/styled'
import Header from './components/Header'
import TodoNewTaskForm from './components/TodoNewTaskForm'
import TodoTaskList from './components/TodoTaskList'
import TaskProvider from './contexts/TaskProvider'

const Container = styled.div`
  width: 400px;
  margin: 0 auto;
`

function App() {
  return (
    <TaskProvider>
      <Container>
        <Header>Todo</Header>
        <TodoNewTaskForm />
        <TodoTaskList css={{ marginTop: 16 }} />
      </Container>
    </TaskProvider>
  )
}

export default App

 

 

위처럼 TaskProvider라는 컴포넌트를 만들고 해당 컴포넌트에서 로직을 만들면 된다.