[React] study (Context) #5일차

 

📖 참고 서적:

소플의 처음 만난 리액트 

 

📼 참고 강의:

생활코딩- React context API

 

 

📆  진행

chapter 14 Context ✅

 

---

14.컨텍스트

 

컨텍스

컴포넌트들 사이에서 데이터를 props를 통해 전달하는것이 아닌 컴포넌트 트리를 통해 곧바로 데이터를 전달하는 방식

어떤 컴포넌트든지 컨텍스트에 있는 데이터에 쉽게 접근 가능

-언제 사용하나요?

여러 컴포넌트들이 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우(로그인,화면밝기)

provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트의 데이터를 읽을 수 있다

 

Context API

전역적으로 상태를 공유할 수 있도록 도와주는 도구 

 

useContext(내가 어떤 컨텍스트를 사용할건지)

전역적으로 상태를 공유할 수 있다.

원하는 곳에 상태를 바꿔 하위에 간편하게 상태 공유가 가능하다.

 

실습코드

import React,{createContext,useContext} from "react";
import './style.css';
const themeDeafault={border:'10px solid pink'};
const ThemeContext = createContext(themeDeafault);

//
export default function ContextAPI(){
    const theme=useContext(ThemeContext);

    return(
        <ThemeContext.Provider vlaue={{border:'10px solid black'}}>
        <div className="root" style={theme}>
            <h1>
                Hello React
                <Sub1/>
            </h1>
        </div>
        </ThemeContext.Provider>
    );
}

function Sub1(){
    //부모중 가장 먼저 등장하는 value값을 갖는다
    const theme=useContext(ThemeContext);
    return(
        <ThemeContext.Provider value={{border:'10px solid green'}}>
        <div style={theme}>
            <h1 >sub1
            </h1>
            <Sub2/>
        </div>
        </ThemeContext.Provider>
    );
}
function Sub2(){
    const theme=useContext(ThemeContext);
    return(
        <div style={theme}>
            <h1>sub2
            </h1>
                <Sub3/>
        </div>
    );
}
function Sub3(){
    const theme=useContext(ThemeContext);
    return(
        <div style={theme}>
            <h1>sub3</h1>
        </div>
    );
}