리액트에서 작업 할 때, 특히 부모 컴포넌트에서 자식 컴포넌트로 값을 넘겨줄 때 props를 이용하곤 한다. 하지만 대규모 프로젝트 같은 경우 props로 값을 넘겨줄때 여러개의 컴포넌트를 통해 쓸데없이 넘겨주게 되면 코드의 복잡성이 증가하고 까다로운 작업이 될 수 있다. 이에 대해 useContext
를 통해 간단한 작업을 할 수 있다.
import React from "react";
const TextContext = React.createContext({});
export default TextContext;
React.createContext
를 통해 Context컴포넌트를 하나 만들어 준다.import TextContext from "./text-context";
const TextProvider = (props) => {
return (
<TextContext.Provider value={{ id: 1, name: "Hyun", isState: false }}>
{props.children}
</TextContext.Provider>
);
};
export default TextProvider;
{props.children}
을 통해 감싸줄 컴포넌트를 살려준다.import "./App.css";
import { useEffect, useState } from "react";
import TextProvider from "./components/store/TextProvider";
import Test from "./components/ContextTest";
function App() {
const [data, setData] = useState(0);
useEffect(() => {
console.log(data);
}, [data]);
function plusHandler() {
setData(data + 1);
}
function minusHandler() {
setData(data - 1);
}
return (
<TextProvider>
<>
<div>{data}</div>
<input type="button" value="+1해주기" onClick={plusHandler} />
<input type="button" value="-해주기" onClick={minusHandler} />
</>
<Test />
</TextProvider>
);
}
export default App;
import { useContext } from "react";
import ReserveData from "./ReserveData";
import TextContext from "./store/text-context";
import Container from "./UI/Container";
const Test = () => {
const dataCtx = useContext(TextContext);
return (
<Container>
<div>name : {dataCtx.name}</div>
<ReserveData />
</Container>
);
};
export default Test;
import React, { useContext, useState } from "react";
import TextContext from "./store/text-context";
import styles from "./ReserveData.module.css";
const ReserveData = () => {
const textCtx = useContext(TextContext);
const [isTrue, setIsTrue] = useState(textCtx.isState);
const booleanHandler = () => {
setIsTrue(!isTrue);
};
return (
<div>
<input
value={isTrue ? "True" : "False"}
type="button"
onClick={booleanHandler}
/>
</div>
);
};
export default ReserveData;
isState
값을 가져왔다.false => true / true => false
가 되도록 이벤트를 넣어 주었다!잘 동작하는 것을 확인할 수 있었다!!!😎
결론적으로 컴포넌트 구조는
App => Text => ReserveData
로 구성되어 있으며, ReserveData 컴포넌트는 props를 통해 값을 전달 받지 않고 Context의 값을 바로 전달 받을 수 있음을 확인 할 수 있었다.