🔍 한눈에 알아보기

Context

• 보통 부모 component의 props를 전달 받아 데이터를 사용함
• 하지만, 자주 쓰이는 데이터의 경우 코드가 너무 복잡해짐 (아래 코드처럼 여러번 전달해줘야하기 때문)

function App(props){
	return <Tollbar theme="dark"/>
}

function Toolbar(props){
	return <div> <ThemedButton theme={props.theme}/></div>
}

function ToolbarButton(props){
	return <Button theme={props.theme}/>
}

• Context를 사용해 전달해주는 방식이 아닌, component tree로 곧바로 전달해 사용

언제 써야할까?

로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 등

• Context를 사용한 코드 👇

const ThemeContext = React.createContext("light");

function App(props){
	return(
    	<ThemeContext.Provider value="dark">
        	<Toolbar/>
        </ThemeContext.Provider>
    )
}

function Toolbar(props){
	return <div> <ThemedButton/></div> 
}

function ToolbarButton(props){
	return (
    	<ThemeContext.Consumer>
        	{value => <Button theme={value}/>}
        </ThemeContext.Consumer>
    )
}

---

Context API

• Context API를 통해 context 사용하기

1. Context 생성

const MyContext = React.createContext(기본값);

2. Context.Provider

• provider를 사용해 데이터를 component에 제공

<MyContext.Provider value={/* some value */}>

• 하위 component에 전달받아 값을 사용 (consuming component)

Provider value 주의 사항

Provider component가 재렌더링 될 때 마다
모든 하위 consumer component도 재렌더링 됨

*state를 사용하면 불필요한 재렌더링을 맏을 수 있음

function App(props) {
	const [value, setValue] = useState({something: 'something'});
    
    return(
    	<MyContext.Provider value={value}>
        	<Toolbar/>
        </MyContext.Provider>
    )
}

3. Context.Consumer

• Context의 데이터를 구독하는 component

<MyContext.Consumer>
	{value => /* Context의 값에 따라서 component들을 렌더링 */}
</MyContext>

• Component의 자식에 있는 함수를 'function as a child'라고 함
  • 현재 context의 value를 받아 react node로 return

useContext

component에서 context를 사용할 때 useContext()를 사용하면 간편함

function MyComponent(props){
	const value = useContext(MyContext);
  
   return(
  	...
  )

4. Context.displayName

• Context provider 또는 consumer를 개발자 도구에 표시할 때 displayName으로 설정한 값과 함께 표시