자식이 부모의 props를 사용하는 방법

• 자식이 부모의 props를 사용하려면 부모에서 자식 컴포넌트를 호출할 때, 인자로 넣어줘서 전하는 방법이 있다.
• 하지만 만약 자식의 부모가 4계단 건너에 있는 경우, 4번의 props 전달이 필요해 매우 귀찮다.
• 이럴 때 Context API를 사용하면 좀 간단하게 해결할 수 있다.

Context API란

• 자바스크립트에서 기본적으로 제공하는 기능이다.
• Context API를 사용하면 props를 사용하지 않아도, 다른 컴포넌트에서 state를 사용할 수 있다.
• 기본적으로 리액트에서 자식에게 props를 전하는 방식을 쓰지 않고, state를 공유하려면 Context API를 사용하거나, 외부 라이브러리(예를 들면 Redux)를 사용해야 한다.

Context API 사용 시나리오

• App에서 만든 state를 Context API를 사용해 다른 컴포넌트에서 사용하는 시나리오

import { useState, createContext } from 'react';

export let Context1 = createContext()

function App() {
  let [array, setArray] = useState([1, 2, 3])
.......

Component API를 사용하려면 위와 같이 createContext를 import 해주어야 한다.
그리고 createContext()를 사용해 변수를 만들어준다. 위의 예에선 Context1이란 변수를 만들고 createContext()의 리턴을 할당해주었다.
마지막으로 만들어준 변수를 export 해준다.

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

export default function Detail() {
  let {array} = useContext(Context1)
	return (
		<div>{array}</div>
	)
}

다른 컴포넌트에서 쓸 땐 useContext를 import 해주어야 한다. 그리고 Context를 만든 컴포넌트(지금 시나리오에선 App.js)에서 만들어준 컴포넌트 변수를 import 해야 한다.
마지막으로 import한 컴포넌트 변수를 useContext를 사용해서 현재 jsx 안의 변수에 할당한다.

Context API의 단점

• context api는 자바스크립트에서 기본적으로 제공하는 기능이지만, 성능에 문제가 있다.
• 컴포넌트 재사용 시 에러가 발생할 수 있다.
  위 시나리오에선 Detail컴포넌트가 App에서 만든 컨텍스트를 불러와 사용하고 있는데, 만약 다른 컴포넌트(App이 아닌)에서 Detail 컴포넌트를 사용하면 Context import를 안해주면 에러가 발생한다.

그래서 보통은 잘 안쓴다.

• 상기한 단점으로 인해 실무에선 Context API 보단, Redux나 Recoil등 외부 상태관리 라이브러리를 사용한다고 한다.