react Context

react state는 props를 통해 parent에서 child로 전파되는데, 컴포넌트(component)계층의 깊이가 깊어질수록 복잡성이 증가하게 된다.

props를 통한 state의 흐름과는 다르게 전역 state와 handler를 Context를 통해 공유가 가능하다. ( 16.3 )

단점은 중첩된 컴포넌트 계층구조에서 사용할 경우 컴포넌트 재사용이 어려워지니 필요한 경우만 사용하자.

어느 외국인 블로그를 대충 읽어보니 디자인테마나 사용자정보(인증 후 ), 언어/로케일정보등에 쓰는게 일반적이라나?

Spring framework의 aop로 다뤄야하는 부분이라고 생각하면 편하겠다. 전체 앱의 공통관점이 필요할때.

이만큼만 알아두고 필요할 때 매뉴얼을 참고하자.

1. App.js 예
   

   import React from "react";
   import AgeComponent from "./AgeComponent";
   
   export let AgeContext = React.createContext({data:[],onClick:handlerClick});//생성시 default값은 없어도
   
   const handlerClick = (e)=>setHandlerClick(e);
   
   function setHandlerClick(e) {
     console.log(e.target.dataset.index);
   }
   
   function App(){
     let [age, setAge] = useState([1,2,3]);
     return (
       <>
       <AgeContext.Provider value={data:age,onClick:handlerClick}>
       	<AgeComponent />
       </AgeContext.Provider>
       </>
     )
   }​

2. AgeComponent 예
   

   import {useContext} from "react";
   import {AgeContext} from "../App";
   
   export default function AgeComponent() {
     let {data,onClick} = userContext(AgeContext); //hook
     return (
       <>
       {
       	data.map((v,i)=>{
           	return <h4 key={i} data-index={i} onClick={onClick}>{v}</h4>
           })
       }
       </>
     )
   }​

https://ko.reactjs.org/docs/context.html

Context – React

typescript를 사용하면 어렵다. context도 value라는 props를 넘기는 걸로 하면 된다 props용 type이 필요하다.

import React, {createContext, JSX, useState} from 'react';
import './App.css';
import AgeComponent from "./AgeComponent";

export interface ContextProps {
    data?: number[],
    handlerClick?: (e: React.MouseEvent<HTMLHeadingElement>) => void
}

export const AgeContext = createContext<ContextProps>({});

function App(): JSX.Element {
	
    const [age, setAge] = useState([1, 2, 3]);
    
    const handlerClick = (e: React.MouseEvent<HTMLHeadingElement>): void => {
        console.log(e.currentTarget.dataset.index);
    }
        
    return (
        <div className="App">
            <AgeContext.Provider value={{data: age, handlerClick: handlerClick}}>
                <AgeComponent/>
            </AgeContext.Provider>
        </div>
    );
}

export default App;

import React, {JSX, useContext} from 'react';
import {AgeContext, ContextProps} from "./App";

const AgeComponent = (): JSX.Element => {
    const {data, handlerClick} = useContext<ContextProps>(AgeContext)
    return (
        <div>
            {
                data?.map((v, i) => {
                    return <h4 key={i} data-index={i} onClick={handlerClick}>{v}</h4>
                })
            }
        </div>
    );
}
export default AgeComponent;