여태까지 배운 props를 통해서 state를 사용할 수 있었다.
하지만 컴포넌트가 여러개로 중첩되어있을때 props를 사용하기가 복잡하고 힘들 수 있다.

리액트 기본문법인 context api를 사용하거나,
Redux 라이브러리를 사용한다면 props없이 자식 컴포넌트에서도 state를 사용할 수 있다.

Context API

App.js에 있는 state를 Detail.js의 컴포넌트에서 사용할때로 예를 들어보자

App.js

import { useState, createContext } from 'react';
export let Context1 = createContext()

function App() {
	let [shoes, setShoes] = useState(data);
    let [stock, setStock] = useState([10, 11, 12]);
  
  	return(
    	<div className="App">
     		<Routes> 
                <Route path="/detail/:id" element={
      				<Context1.Provider value={{shoes, stock}}>
      					<Detail />
        			</Context1.Provider>
				} />
            </Routes>
    	</div>
    )
}

1. let 작명 = createContext함수를 작성 해준다.

2. 작명 컴포넌트를 사용할 컴포넌트에 감싸준다.
   ex) <작명.Provider>컴포넌트</작명.Provider

3. value속성을 통해 공유를 원하는 state명을 추가해준다.

Detail.js

import { useContext } from 'react';
import { Context1 } from '../App.js'

function Detail() {
	let { stock, shoes } = useContext(Context1)
    
    return(
    	<div>현재 재고 : {stock[0]}개</div>	// 남은수량 : 10개
    )
}

function DetailChild() {
	let { stock, shoes } = useContext(Context1)
    console.log(stock[0])	// 10
}

Detail컴포넌트뿐만 아니라 그 하위 컴포넌트인 DetailChild컴포넌트에서도
state사용이 가능하다.

만약 그냥 pros로 사용한다면?

Context API, 외부라이브러리를 통해 사용하지 않았을때
간단하게 예를 들어보자.

App.js

function App() {
	let [stock, setStock] = useState([10, 11, 12]);
	
    return (
    	<Detail stock={stock} shoes={shoes} />
    )
}

Detail.js

function Detail(props) {
    return (
    	<div>{props.stock[0]}</div>		// 10 

		<DetailChild stock={props.stock} shoes={props.shoes}/>
    )
}

function DetailChild({stock, shoes}) {
    return (
    	<div>{props.stock[0]}</div>		// 10 
    )
}

위와 같을때 중첩된 컴포넌트가 하나뿐이라서 복잡해 보이지 않지만
중첩이 많이 되는 상황일 경우에 번거로워진다.

결론

그럼 여러 페이지에서 동일한 state를 사용해야 할 때

props방식을 제외하고 Context API를 사용하는게 맞을까?

사실 Context API를 사용하는 경우는 많지 않다고 한다.

Context API의 단점이 이유이다.

1. state 변경시 하지 않아야 할 것까지 재렌더링 한다.
value 속성을 받은 컴포넌트, 그 컴포넌트의 자식 컴포넌트 포함에서 context API로 가져온 state를 사용하든 안하든 재렌더링을 한다.


2. 다른 페이지에서 재사용하기가 어렵다.
state를 사용할 컴포넌트에서 useContext문법을 가져다 사용하고있을때 다른 페이지에서 재사용하기 어려워진다.

성능이슈가 있고, 컴포넌트 재활용이 어려워진다고 한다.

그렇기 때문에 대부분이 외부라이브러리를 가져다 사용한다.
다음에는 Redux를 공부해보겠다.