useContext 실습

 

 

 

 

 컴포넌트 A, B, C, ... ,Z가 있다. 만약 A에서의 어떤 값을 Z까지 전달해주려면 어떻게 해야할까? 쉽게, 아래의 방법이 있을 것이다. 

 

const A = () => {
    const data = 'data';

    return (
        <B data={data} />
    )
}

const B = (props) => {

    return (
        <C data={data} />
    )
}

const C = (props) => {

    return (
        <D data={data} />
    )
}

// .....


const Z = (props) => {

    return (
        <div>props.data</div>
    )
}

 

 A 컴포넌트의 data 값을 Z에서 사용하기 위해서, 중간 컴포넌트들의 props를 통해 계속 내려보내는 것이다. 이 방법을 prop drilling이라고 한다. 문제없이 잘 작동된다. 그런데 중간 컴포넌트들의 갯수가 1000개라면? 어느 세월에 코드를 작성할 수 있을까. 심지어 중간에 빠뜨린다면 구멍을 찾기 위해서 매우 귀찮은 상황이 벌어질 것이다. 리액트는 이러한 고민을 해결해줄 수 있다. Context를 통해서 말이다.

 

 

 

 

 

 

실행 결과

 

 

 

 

 

아키텍쳐

 

 

 

 

 

 

// AppContext.jsx

import { createContext } from 'react';

// default Context 값과 본문에서 사용할 Context의 속성 명과 갯수가 일치해야한다.

export const AppContext = createContext({
    text: '',
    setText: () => {}
});

 

 

 

 

 

 

// B.jsx

import React, { useContext } from 'react';
import { AppContext } from './AppContext.jsx';

const B = () => {
	// Appcontext.Provider로 감싸져 있으므로 useContext로 접근
    const { text, setText } = useContext(AppContext);

    const handleChange = (e) => {
        const { value } = e.target;
        // 컴포넌트 최상위 계층에서 선언된 state를 최하위에서 수정함
        // App.Consumer 대신 useContext를 사용할 수 있다.
        setText(value);
    }

    return (
        <div>
           <div>B text: {text}</div>
           <input type='text' onChange={(e) => {handleChange(e)}}></input>
        </div>
    )
}

export default B;

 

 

 

 

 

// A.jsx

import React, { useContext } from 'react';
import { AppContext } from './AppContext.jsx';
import B from './B.jsx';
const A = () => {
	// 일부만 받아 사용 가능함
    const { text } = useContext(AppContext);

    return (
        <div>
           <div>A text: {text}</div>
           <B /> 
        </div>
    )
}

export default A;

 

 

 

 

 

// App.jsx

import React, { useState, createContext } from 'react';
import ReactDOM from 'react-dom';
import { AppContext } from './AppContext.jsx'
import A from './A.jsx';

const App = () => {
    const [ text, setText] = useState('default');

    return (
        <div>
        	// Provider로 감싸진 컴포넌트들에게 value로 준 값이
            // useState를 통해 할당된다
            
            <AppContext.Provider value={{text, setText}}>
                <div>App text: {text}</div> 
                <A />
            </AppContext.Provider>
        </div>
    )
}


ReactDOM.render(
    <App />,
    document.getElementById('root')
)

 

 

 

 

 

ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React

 

 

 

 

 

ko.reactjs.org/docs/context.html

Context – React

 

 

 

 

 

velog.io/@public_danuel/trendy-react-usecontext

React 강좌) trendy React 3-1. useContext 알아보기