Context Api 기초
전체코드
import React, {createContext, useContext} from "react";
import './App.css';
const themeDefault = {border: '10px solid green'}
const themeContext = createContext(themeDefault)
export default function App(){
const theme = useContext(themeContext)
console.log("theme: ", theme)
return(
<themeContext.Provider value={theme}>
<div className="root" style={{border: '10px solid purple'}}>
<h1>Hello World!</h1>
<Sub1></Sub1>
</div>
</themeContext.Provider>
)
}
function Sub1(){
const theme = useContext(themeContext)
return(
<themeContext.Provider value={{border: '10px solid red'}}>
<div style={theme}>
<h2>Sub1</h2>
<Sub2></Sub2>
</div>
</themeContext.Provider>
)
}
function Sub2() {
const theme = useContext(themeContext);
return (
<div style={theme}>
<h3>Sub2</h3>
<Sub3></Sub3>
</div>
);
}
function Sub3() {
const theme = useContext(themeContext);
return (
<div style={{border: '10px solid blue'}}>
<h3>Sub3</h3>
</div>
);
}
1. Context Api(createContext)
- 애플리케이션에서 전역적으로 디자인을 공유하는 테마 기능 구현
import React, {createContext} from "react";
const themeContext = createContext(themeDefault)
--> themeDefault가 새로 생성한 컨텍스트의 기본값이 됨
================================================================
2. 기본값 읽어오기(useContext)
import React, {createContext, useContext} from "react";
export default function App(){
const theme = useContext(themeContext)
출력 시: theme = Object{border: "10px solid green}
하나에만 사용: <div className="root" style={theme}>
================================================================
3. 테마 전체 적용
function Sub1(){
const theme = useContext(themeContext)
return(
<themeContext.Provider value={{border: '10px solid green'}}>
<div style={theme}>
<h2>Sub1</h2>
<Sub2></Sub2>
</div>
</themeContext.Provider>
)
}
function Sub2() {
const theme = useContext(themeContext);
<div style={theme}>
function Sub3() {
const theme = useContext(themeContext);
<div style={theme}>
1. <themeContext.Provider>를 return 최상단에 배치(전체를 감싸는 형태)
2. <themeContext.Provider>에 value 속성 부여
3. 하위 컴포넌트 각각 useContext와 style 부여
================================================================
4. 테마 적용 순서
1. 스타일 속성으로 직접 부여
<div className="root" style={{border: '10px solid purple'}}>
<div style={{border: '10px solid blue'}}>
2. 하위 컴포넌트의 경우, 상위 컴포넌트의 themeContext.Provider에서 부여한 value
<themeContext.Provider value={{border: '10px solid red'}}>
3. 하위 컴포넌트의 경우, 최상위 컴포넌트의 themeContext.Provider에서 부여한 value
<themeContext.Provider value={theme}>