Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 보조정렬
- Java
- table
- hadoop
- vaadin
- Python
- mapreduce
- plugin
- Eclipse
- SSL
- IntelliJ
- MSSQL
- Spring
- Sqoop
- SPC
- GIT
- Express
- react
- tomcat
- SQL
- Kotlin
- es6
- window
- JavaScript
- xPlatform
- Android
- R
- NPM
- 공정능력
- mybatis
Archives
- Today
- Total
DBILITY
react Context 본문
반응형
react state는 props를 통해 parent에서 child로 전파되는데, 컴포넌트(component)계층의 깊이가 깊어질수록 복잡성이 증가하게 된다.
props를 통한 state의 흐름과는 다르게 전역 state와 handler를 Context를 통해 공유가 가능하다. ( 16.3 )
단점은 중첩된 컴포넌트 계층구조에서 사용할 경우 컴포넌트 재사용이 어려워지니 필요한 경우만 사용하자.
어느 외국인 블로그를 대충 읽어보니 디자인테마나 사용자정보(인증 후 ), 언어/로케일정보등에 쓰는게 일반적이라나?
Spring framework의 aop로 다뤄야하는 부분이라고 생각하면 편하겠다. 전체 앱의 공통관점이 필요할때.
이만큼만 알아두고 필요할 때 매뉴얼을 참고하자.
- 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> </> ) }
- 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
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