📚 들어가며
context API 를 사용하여 전역 상태관리를 해보자.
이미지 출처
1. 기존의 상태 관리 흐름
지금까지 컴포넌트간 데이터는 props를 통해 전달되었다. 모든 컴포넌트에서 사용돼야 하는(==전역적으로 사용돼야 하는) 상태들 같은 경우는 App 컴포넌트에서 관리되고 하위 컴포넌트들로 props의 형태로 전달되었다.
이런 식으로 말이다. 상위 컴포넌트에서 부터 꼬리에 꼬리를 물고 전달되는 형태는 대충 봐도 너무 복잡하다. 이러한 단점을 개선하기 위해 리액트는 context API 를 제공한다.
context API 를 통해 생성한 context에 전역 상태를 담아두면 여러 컴포넌트에서 접근해 꺼내쓸 수 있는 방식이다. 어떻게 작동하는지 코드를 통해 확인해보자.
2. 사용법 익히기
import {createContext} from 'react';
const ColorContext = createContext({color:'black}');
export default ColorContext;context는 createContext 함수를 사용하여 생성한다. 함수의 인자로 Context의 기본값을 지정할 수 있다. 예시 코드는 ColorContext라는 임의의 context를 만든 후 초기값을 검정색으로 지정했다.
Consumer
import ColorContext from '...'
const ColorBox = () =>{
return(
<ColorContext.Consumer>
{value => (
<div
style={{
width:'64px',
height:'64px',
background: value.color
}}
/>
)}
</ColorContext.Consumer>
)
}
export default ColorBox;Consumer 컴포넌트를 사용해 context의 value값에 접근 가능하다. 위 코드는 Render Props를 사용해 value값을 바로 사용해 검정색 64px 정사각형을 렌더링하고 있다.
Provider
Consumer외에도 Provider 기능이 제공된다. Provider를 통해 context의 값을 수정할 수 있다.
const App = () =>{
return(
<ColorContext.Provider value={{color:red}}>
<div>
<ColorBox/>
</div>
</ColorContext.Provider>
);
};Provider를 사용해 context의 색 값을 빨간색으로 바꿔줬다. ColorBox 컴포넌트 내부에서 Consumer를 사용해 값에 접근해 결과적으로 빨간 박스가 렌더링된다.
동적 Context 사용
context의 value값에 함수를 전달해줄 수도 있다. 전달된 함수를 사용해 context의 값을 동적으로 변경할 수 있다.
import {createContext,useState} from 'react';
const ColorContext = createContext({
state:{color:'black', subcolor:'red'},
actions:{
setColor:()=>{},
setSubcolor:()=>{}
}
});
const ColorProvider =({children}) =>{
const [color,setColor] = useState('black');
const [subcolor,setSubcolor] = useState('red');
const value = {
state:{color,subcolor},
actions:{setColor,setSubcolor}
};
return(
<ColorContext.Provider value={value}>{children}</ColorContext.Provider>
);
}
const {Consumer : ColorConsumer} = ColorContext;
export {ColorProvider,ColorConsumer};
export default ColorContext;기존 context코드를 위처럼 변경했다.
- context의 기본값에 빈 함수를 추가로 지정해뒀다
- ColorProvider 컴포넌트를 만들어 provider를 보다 사용하기 쉽게 만들어줬다
- Consumer도 구조분해로 조금 더 편하게 쓸 수 있도록 만들어줬다
Provider를 통해 context에 상태관리 함수들을 넣어줬기에 이제 필요할 때마다 함수들을 사용해 전역상태를 동적으로 관리할 수 있다. 버튼을 누르면 박스의 색이 바뀌게 한다던가.. 등으로 응용할 수 있을 것이다.
useContext 사용하기
리액트 훅은 없는 게 없는 것 같다..! Render props 패턴을 사용하지 않아도 useContext 훅을 사용해 context에 접근할 수 있다고 한다.
const ColorBox = () =>{
const {state} = useContext(ColorContext);
return(
...
)
}이래 쓰면 된다고 한다. 함수/상태 전부 접근하고 싶으면 value를 할당받으면 된다.
💁 마치며..
뭐 어려운 부분도 딱히 없고 해서 줄줄 적진 않았다
리덕스 하자 이제~...
