react μ€ν°λμμ 리μ‘νΈλ₯Ό λ€λ£¨λ κΈ°μ μ΄λΌλ μ± μ μ μ νκ³ μ΄ μ± μ μ½κ³ λ°°μ΄ κ²μ λ°νμΌλ‘ μμ±λμλ€.
π‘ μ μμ μΌλ‘ μ¬μ©λλ λ°μ΄ν°λ₯Ό κ΄λ¦¬ν λ μ μ©νκ² μ¬μ©λλ κΈ°λ₯
App
μ state
μ λ£μ΄μ κ΄λ¦¬νλ€.props
λ‘ μνλ μνλ₯Ό μ λ¬νλ€.Context API
λ₯Ό μ¬μ©νλ©΄ λ¨ ν λ²μ μνλ κ°μ λ°μμ μ¬μ©ν μ μλ€.Context
κ°μ²΄λ₯Ό λ§λ€ λλ createContext
ν¨μλ₯Ό μ¬μ©νλ€.Context
μ κΈ°λ³Έκ°μ μ λ¬νλ€.Provider
μ»΄ν¬λνΈλ₯Ό μ¬μ©νμ§ μμμ λλ§ μ¬μ©λλ€.const MyContext = createContext(defaultValue);
Provider
λ₯Ό μ΄μ©νμ¬ context
κ°μ λ°κΏ μ μλ€.Provider
μ»΄ν¬λνΈλ value props
μ λ°μμ μ΄ κ°μ νμμ μλ μ»΄ν¬λνΈλ€μκ² μ λ¬νλ€. Context
μ μλ κ°μ΄ νμν μ»΄ν¬λνΈλ€μ Provider
μ»΄ν¬λνΈλ‘ κ°μΌλ€.Provider
νμμ λ λ€λ₯Έ Provider
μ»΄ν¬λνΈκ° μλ κ²μ΄ κ°λ₯νλ©°, μ΄ κ²½μ° νμ Provider
μ value
κ° μ°μ μλλ€.Context.Provider
μ value props
κ°μ΄ λ°λ λλ§λ€ Context
λ₯Ό μ¬μ©νλ νμ μ»΄ν¬λνΈλ€μ΄ 리λ λλ§λλ€.value props
μμ μ¬λ¬ κ°λ€μ΄ μλ€κ³ κ°μ ν λ μ»΄ν¬λνΈκ° Context
μμ νΉμ κ°μ μμ‘΄ν κ²½μ°, ν΄λΉ κ° λ§κ³ λ€λ₯Έ κ°μ΄ λ³κ²½λ λλ μ»΄ν¬λνΈκ° 리λ λλ§λλ€.Context
λ₯Ό λΆλ¦¬νμ¬ μμ±νλ€. (ex. StateContext
/ ActionContext
)<MyContext.Provider value={/* μ΄λ€ κ° */}></MyContext.Provider>
Context
μ μλ κ°μ Context.Consumer
λ₯Ό μ΄μ©ν΄ μ‘°νν μ μλ€.Context.Consumer
μ μμμ ν¨μμ¬μΌ νλ€.Context
μ νμ¬ κ°μ λ°κ³ React element
λ₯Ό λ°ννλ€.<MyContext.Consumer>
{value => /* context κ°μ μ΄μ©ν λ λλ§ */}
</MyContext.Consumer>
Context
μ μλ κ°μ μ¬μ©ν λ Consumer
λμ useContext
λ₯Ό μ΄μ©ν μ μλ€.const value = useContext(MyContext);
Context
λ₯Ό μ’ λ μ½κ² μ¬μ©νκ³ μΆλ€λ©΄ static contextType
μ μ¬μ©ν μ μλ€.static contextType
κ°μ Context
λ‘ μ§μ νλ©΄ this.context
λ₯Ό μ‘°ννμ λ νμ¬ Context
μ value
λ₯Ό κ°λ¦¬ν€κ² λλ€.class MyClass extends React.Component {
static contextType = MyContext;
render() {
let value = this.context;
/* render something based on the value */
}
}
static contextType
μ μ μνλ©΄ ν΄λμ€ λ©μλμμλ Context
μ λ£μ΄ λ ν¨μλ₯Ό νΈμΆν μ μλ€.Context
λ§ μ¬μ©ν μ μλ€.