[React] - Context API (props)

컴포넌트를 사용할 때 props는 기본적으로 부모 - 자식 간에서 사용할 수 있는 문법이다.
사진에 보이는 것처럼 App > Detail > TabContent의 경우 Tab에서 App의 스테이트를 한 번에 가져다 쓸 수 없기 때문에
일일이 이렇게 하나개 씩 전부 넘겨줘야 하는 불편함이 있다.

이러한 귀찮음을 해결하기 위한 방법은 2가지가 있는데

1. Context API 사용하기
2. Redux 사용하기

그래서 이번에는 이러한 것들을 간편하게 해줄 수 있는
Context API에 대해 공부해 보겠다

let App = () => {
let [shoes, setShoes] = useState('');
return(

)
}
let Detail = (props)=>{
return(

)
}
let TabContent = ({shoes}) => {
return(

) }

Context API 문법으로 props 없이 state 공유하기

재고라는 state를 App 컴포넌트에 만들어봅시다.
Context API 문법을 쓰면 props 전송없이도 TabContent 컴포넌트가 쓸 수 있는데
이거 쓰려면 일단 셋팅부터 해야합니다.

1. 일단 createContext() 함수를 가져와서 context를 하나 만들어줍니다.
context를 쉽게 비유해서 설명하자면 state 보관함입니다.

2. 아까만든 Context1로 원하는 곳을 감싸고 공유를 원하는 state를 value 안에 다 적으면 됩니다.
그럼 이제 Context1로 감싼 모든 컴포넌트와 그 자식컴포넌트는
state를 props 전송없이 직접 사용가능합니다.
예를 들어서 Detail 컴포넌트에서 Context에 있던 state를 꺼내 쓰려면

1. Context1을 import 하고
2. useContext() 안에 담으면 됩니다. Context 해체해주는 함수임
   그럼 그 자리에 공유했던 모든 state가 남습니다.
   변수에 담아서 가져다쓰거나 하면 됩니다.
   심지어 Detail 안에 있는 모든 자식컴포넌트도 useContext() 쓰면 자유롭게 재고 state를 사용가능합니다.

Context API 단점

1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 되고

2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 귀찮아질 수 있습니다.

그래서 이것 보다는 redux 같은 외부라이브러리를 많이들 사용합니다.