리액트 Context와 useContext 훅이란?

이번에는 리액트에서 전역적으로 데이터를 컴포넌트들에 전달하는 데 사용되는 Context와 useContext에 대해 알아보겠습니다.

📑목차
1. Context
1-1. Context란?
1-2. Context의 특징
1-3. Context 문법
1-4. Provider
2. useContext 
2-1. useContext 훅이란
2-2. useContext를 사용한 예제 코드

서론

리액트에서 컴포넌트 간 데이터를 전달할 때 가장 일반적인 방법은 props를 사용하는 것입니다. 하지만 컴포넌트 구조가 깊어지고 여러 단계에 걸쳐 같은 데이터를 전달해야 할 경우, props 전달은 번거롭고 코드가 복잡해질 수 있습니다.

 

이러한 문제를 해결하기 위해 리액트는 Context API를 제공합니다. Context를 사용하면 전역적으로 데이터를 관리하고, 여러 컴포넌트에 손쉽게 전달할 수 있습니다.

 

또한 함수형 컴포넌트에서 Context의 데이터를 더욱 간편하게 사용할 수 있도록 돕는 훅인 useContext도 함께 제공됩니다. 이 두 가지는 함께 사용되어, 리액트 애플리케이션에서 전역 상태 관리를 보다 깔끔하고 효율적으로 구현할 수 있도록 해줍니다.

이번 포스팅에서는 Context와 useContext의 개념, 사용법, 그리고 실제 활용 예제를 통해 두 개념을 자세히 알아보겠습니다.

본론 

1. Context

 

1-1. Context란?

리액트에서 컴포넌트 트리 전체에 걸쳐 데이터를 전역적으로 공유할 수 있도록 해주는 기능

 

1-2. Context의 특징

 

1. 중간 컴포넌트를 거치지 않아도 됩니다.

- Context를 사용하면, 데이터가 필요한 컴포넌트에서 직접 접근할 수 있습니다. 중간에 위치한 컴포넌트들이 불필요하게 props를 전달할 필요가 없습니다

 

2. 전역 상태 관리 역할 수행

- 작은 규모의 앱에서는 별도의 상태 관리 없이도 Context만으로 전역 상태 관리가 가능합니다.

 

3. Provider가 value를 전달

- Context는 반드시 Provider 컴포넌트를 통해 값을 전달해야 하며, 하위 컴포넌트들은 이 값을 구독하게 됩니다.

 

1-3. Context 문법

## context 문법
```js
// Login 컴포넌트의 자식 컴포넌트에서 상태변수를 공유해야하는 내용 
// Login 얘는 부모 컴포넌트
// 3개의 자식 컴포넌트를 가지고 있다 (A,B,C의 컴포넌트가 있다)
// A의 컴포넌트에 값을 전달해야해서 props 드릴링이 발생, 이것을 방지하기 위해 context를 사용해서 전역적으로 데이터를 전달
// Login -> C -> B -> A (name이라는 상태변수)
import {createContext} from 'react';
// 상태변수를 저장할 저장소, 공유하기 위한 값을 저장할 공간
// 객체의 저장소를 하나 만들고
export const Store = createContext();
// 저장 공간을 만들고 사용하는 영역을 지정
// 플럭스 상태 공유, 부모를 기준으로 자식 컴포넌트들에게 저장공간의 주소를 주입

import Store from "./Store.js"
const Login = () => {
    // Login 부모 컴포넌트에서 프로바이더로 주소를 주입
    // 공유하고 싶은 값
    // 부모 컴포넌트의 값을 자식들이 props로 전달 받아서 사용하지 않고, 저장소의 주소에 접근하여
    // 사용할 수 있도록
    const [name, setName] = useState("sugo"); // 부모 컴포넌트에 상태변수
    
    const obj = {
        name, setName
    }

    return (
        <Store.Provider value={obj}>
        <C />
        </Store.Provider>
    )

}

const C = () => {
    return <B />
}
const B = () => {
    return <A />
}

import { useContext} from 'react';
import Store from './Store';

const A = () => {
    const obj = useContext(Store);

    /*
        {
            name, setName
        }

    */
}

```

 

1-4. Provider

일단 Provider가 무엇인지 알아야합니다. 개념부터 보시죠!

Provider는 리액트의 Context에서 하위 컴포넌트들에게 값을 전달해주는 컴포넌트 입니다.

 

Context를 생성한 뒤, Provider를 사용해 value를 지정하면, 그 값을 하위 트리에 있는 컴포넌트들이 접근할 수 있습니다.

 

2. useContext

2-1. useContext 훅이란?

useContext는 Context에서 제공하는 값을 함수형 컴포넌트 내에서 간편하게 가져올 수 있게 해주는 훅

 

2-2. useContext 훅을 사용한 예제 코드

Stor 폴더에서 작성

import {createContext} from 'react';

// 저장소의 값이 없는상태 초기화
export const LoginStore = createContext();

A.js

import { useContext} from 'react'
import { LoginStore } from './store/Store'
import { Layout } from './Content.styled';

const A = () => {
    const {name} = useContext(LoginStore);
  return (
    <Layout>
        {name}
    </Layout>
  )
}

export default A

B.js

import React, { useContext } from 'react'
import A from './A'
import { Layout } from './Content.styled'
import { LoginStore } from './store/Store'

const B = () => {
    const {setName} = useContext(LoginStore);
    const submitHandler = (e) => {
        e.preventDefault();
        // 커스텀 훅으로 관리
        // form 데이터를 제출하는데 name의 값이
        // name을 가지고 요청 객체로 파싱하는 작업을
        // 우리가 직접 만들수는 있을건데
        // name의 값을 전달을 해서 요청 객체를 form생성 

        // const formData = new FormData(e.target);
        // // for of 로 뭐가들어있는지 콘솔확인
        // // axios({ url : "" , method : "POST", data : formData})

        console.log(e.target.nickname);
        setName("suho1");
    }
  return (
    <Layout>
        <form onSubmit={submitHandler}>
            <label>이름</label>
            <input name='nickname'/>
            <button>이름 수정</button>
        </form>
      <A />
    </Layout>
  )
}

export default B

C.js

import React from 'react'
import B from './B'
import { Layout } from './Content.styled'

const C = () => {
  return (
    <Layout>
        <B />
    </Layout>
  )
}

export default C

Layout.js

import styled from 'styled-components';

export const Layout = styled.div`
    padding: 40px;
    border: 1px solid;
    box-sizing: border-box; 
`

Login.js

import React, { useState } from 'react'
import { LoginStore } from './store/Store';
import C from './C'

const Login = () => {
    const [name, setName] = useState("suho");
    return (
        <LoginStore.Provider value={{name, setName}}>
            <C />
        </LoginStore.Provider>
    )
}

export default Login

결론

Context와 useContext는 리액트에서 컴포넌트 간 전역 데이터를 효율적으로 공유할 수 있게 해주는 도구입니다.Provider로 값을 전달하고, useContext 훅으로 쉽게 값을 받아올 수 있어 코드가 간결해집니다.작은 규모의 전역 상태 관리에는 Context만으로도 충분히 대응할 수 있습니다.