Context 2

2024. 7. 5. 17:51React

Context는 1개의 값만 제공할 수 있음
-> 2개 이상의 값을 제공하려면 {}, []로 묶어서 제공

** <TestContext.Provider value={{number, setNumber}}>
number와 setNumber를 {number, setNumber}로 작성 시 다음과 같이 변환, 전달함
    {"number" : number, "setNumber" : setNumber}
==>    {"number" : 0, "setNumber" : 변환될 값}

 

import React, {createContext ,useContext, useState} from "react";

const TestContext = createContext();

//후손 컴포넌트
const Sibling = () =>{
    // TestContext에서 제공된 값을 여기서 사용
    //  const [number, setNumber] = useContext(TestContext);
        const {number, setNumber} = useContext(TestContext);
    
        return(
            <>
                <h3>후손 컴포넌트에서 값 변경</h3>
                <input type="number" value={number} onChange={e => {setNumber(e.target.value)}}/>
            </>
        )
    }

//자식 컴포넌트
const Child = () =>{
// TestContext에서 제공된 값을 여기서 사용
//  const [number, setNumber] = useContext(TestContext);
    const {number, setNumber} = useContext(TestContext);

    return(
        <>
            <h3>자식 컴포넌트에서 값 변경</h3>
            <input type="number" value={number} onChange={e => {setNumber(e.target.value)}}/>
            <Sibling/>
        </>
    )
}

//부모 컴포넌트
const Parent = () =>{

    //숫자 상태 변수 선언
    const [number, setNumber] = useState(0); //number 변수에 초기값 0 설정

    return(
        <TestContext.Provider value={{number, setNumber}}>
            <h1>
                부모 값 :
                {/*부모 컴포넌트의 현재값 출력*/}
                <span className="red">{number}</span>
            </h1>
            <Child/>
        </TestContext.Provider>
    )
}
export default Parent;

 

App.js

import './App.css';
import 컨텍스트2 from './component/R13_Context2.js';

function App() {
  return (

        <컨텍스트1/>
        <p>--------------------------------------------------</p>
        <컨텍스트2/>

    </div>
  );
}

export default App;

 

자식이나 후손에서 값을 변경하면 부모의 값도 변경

'React' 카테고리의 다른 글

Bootstrap  (0) 2024.07.05
Context 3  (0) 2024.07.05
Context 1  (0) 2024.07.05
State 3  (0) 2024.07.04
State 2  (0) 2024.07.04