15-1. 개념
- 컴포넌트 합성을 통해 트리 구조가 복잡해질수록 하위 컴포넌트로 props를 전달하기 위해 drilling이 발생할 수 있게 되고, 이 때 유지 보수 및 코드 읽기가 어려워지는 문제가 있음
- context는 React 컴포넌트 트리 안에 전역적으로 데이터를 공유할 수 있도록 고안된 방법
- context를 사용하면 중간 엘리먼트들에게 props를 넘겨주지 않아도 되고, 유지보수도 수월
- 단, 컴포넌트 재사용에 어려움이 생김(구독하고 있는 컴포넌트가 있기 때문)
React의 useContext는 React의 컴포넌트 간 데이터를 전달하는 방법 중 하나로, 컴포넌트 계층 구조에서 상위에서 하위로 데이터를 전달하는 것이 아닌, 특정한 컴포넌트에서 createContext로 생성한 Context 객체를 이용하여 하위 컴포넌트에서 필요한 데이터를 전달하는 방법입니다.
이를 이용하여 Provider 컴포넌트에서 value를 설정하고, Consumer 컴포넌트에서 해당 값을 사용할 수 있습니다. 이를 통해 컴포넌트 간의 중첩이 깊어지더라도 특정 값을 전달하기 위해 props를 계속해서 넘겨줄 필요가 없어 코드의 가독성이 향상됩니다.
useContext는 주로 전역 상태를 관리하는 것에 사용됩니다. 예를 들어, 로그인 정보나 애플리케이션 설정과 같이 많은 컴포넌트에서 공유되어야 하는 데이터를 관리할 때 유용합니다.
다크 모드 설정 - context를 사용하지 않는 예제 */
const { useState } = React;
function Header(props){
return(
<header
className="header"
style={
{
backgroundColor : props.isDark? 'black' : 'lightgray',
color : props.isDark? 'white' : 'black'
}
}
>
<h1>Welcome to Greedy World!</h1>
</header>
);
}
function Content({isDark}){
return(
<div
className="content"
style={
{
backgroundColor : isDark? 'black':'white',
color : isDark? 'white' : 'black'
}
}
>
<p>내용입니다</p>
</div>
);
}
function Footer({isDark, setIsDark}){
const toggleHandler = () => setIsDark(!isDark);
return (
<footer
className = "footer"
style={
{
backgroundColor : isDark? 'black' : 'lightgray',
color : isDark? 'white' : 'black'
}
}
>
<button onClick={toggleHandler}>{ isDark? 'LightMode' : 'DarkMode'}</button>
Copyright 2023. team-greedy. all rights reserved.
</footer>
);
}
function Page({isDark, setIsDark}){
return (
<div className='page'>
<Header isDark={isDark}/>
<Content isDark={isDark}/>
<Footer isDark={isDark} setIsDark={setIsDark}/>
</div>
);
}
function App(){
const [isDark, setIsDark ] = useState(false);
return <Page isDark = {isDark} setIsDark = { setIsDark }/>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);15-2. useContext
const DarkModeContext = createContext(null);
function Header(){
const context = useContext(DarkModeContext);
const {isDark} = context;
return(
<header
className="header"
style={
{
backgroundColor : isDark? 'black' : 'lightgray',
color : isDark? 'white' : 'black'
}
}
>
<h1>Welcome to Greedy World!</h1>
</header>
);
}
function Content(){
const context = useContext(DarkModeContext);
const {isDark} = context;
return(
<div
className="content"
style={
{
backgroundColor : isDark? 'black':'white',
color : isDark? 'white' : 'black'
}
}
>
<p>내용입니다</p>
</div>
);
}
function Footer(){
const context = useContext(DarkModeContext);
const {isDark, setIsDark} = context;
const toggleHandler = () => setIsDark(!isDark);
return (
<footer
className = "footer"
style={
{
backgroundColor : isDark? 'black' : 'lightgray',
color : isDark? 'white' : 'black'
}
}
>
<button onClick={toggleHandler}>{ isDark? 'LightMode' : 'DarkMode'}</button>
Copyright 2023. team-greedy. all rights reserved.
</footer>
);
}
function Page(){
return (
<div className='page'>
<Header />
<Content />
<Footer />
</div>
);
}
function App(){
const [ isDark, setIsDark ] = useState(false);
/* provier는 context를 구독하고 있는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.
Provider는 valeu prop 을 이용하여 하위 컴포넌트에게 값을 전달한다.
이 때 값을 전달 받을 수 있는 컴포넌트 수에는 제한이 없다.
prop 하위에서 context를 구독하는 모든 컴포넌트는 value prop이 바뀔 때마다 다시 랜더링 된다. */
return (
<DarkModeContext.Provider value={{isDark, setIsDark}}>
<Page/>
</DarkModeContext.Provider>
)
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
DREAM STARTER