[React] useContext 사용해보기
문제
구조를 짜는동안 component 안에 component 들이 수없이 많아지면서 props로 일일히 받아야 되는 상황이 되었다.
수많은 props들 !
해결
useContext 사용하기
먼저 전역 변수로 createContext
를 사용한다
import React, { useContext } from 'react';
useContext import 추가 해주고
let stockContext = React.createContext()
전역에 변수로 선언해준다.
적용 하고싶은 돔 영역에 에 변수 태그.Provider
를 추가해준다.
<stockContext.Provider value={stock}>
<div className="row">
</div>
</stockContext.Provider>
value
: 추가해주고 싶은 데이터 선언
function Card( props ) {
let id = props.shoes.id + 1
/* usecontext 훅 사용 */
const letStock = useContext( stockContext )
return (
<div className="col-md-4">
<img src={`https://codingapple1.github.io/shop/shoes${id}.jpg`} alt="" width="100%" />
<h4>{props.shoes.title}</h4>
<p>{props.shoes.content} & {props.shoes.price}</p>
<Button as="input" type="reset" value="더보기" />
<p>재고 : {letStock[props.shoes.id]}</p>
</div>
)
}
함수 안에 전역 변수를 안에서 선언해준 변수의 useContext 안에 넣어줌 useContext( stockContext )
<p>재고 : {letStock[props.shoes.id]}</p>
이렇게 사용하면 된다
다른파일 import 해서 사용해보기
App.js
// import 할 변수를 선언
export let stockContext2 = React.createContext()
Detail.js
//app.js 에서 받아온 변수
import { stockContext2 } from './App.js'
function Detail( props ) {
//변수 선언
const context = useContext( stockContext2 )
return (
<div>test {context} </div>
)
}
이렇게 사용하면 된다!
깨달음
컴포넌트가 많아지면서 props 사용이 점점 복잡해 졌는데 useContext
를 사용하니 props 로 복잡하게 관리 할 수고를 덜어 주어 코드가 더 짧아지고 덜 복잡하게 데이터를 보여줄 수 있었다.
Author And Source
이 문제에 관하여([React] useContext 사용해보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rkql1109/React-useContext-사용해보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)