DBILITY

react Context 본문

front-end & ui/react

react Context

DBILITY 2022. 1. 6. 10:29
반응형

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

A JavaScript library for building user interfaces

ko.reactjs.org

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;
반응형

'front-end & ui > react' 카테고리의 다른 글

react qr-reader v17  (0) 2022.01.23
react' must be in scope when using jsx react/react-in-jsx-scope react 17  (0) 2022.01.06
react spinners for loading layer  (0) 2022.01.05
react css transition  (0) 2021.12.31
react bootstrap  (0) 2021.12.30
Comments