🏷️Simple 설명

1. react에서 상태관리를 하기 위한 내장 라이브러리입니다.
2. props drilling 막기, 렌더링 최적화가 필요없는(테마, 라이트모드)라면 외부 라이브러리를 사용할 필요가 없습니다.

🤷‍♀️Context가 필요한 이유

1. React는 단방향 데이터 흐름

부모 컴포넌트에서 자식 컴포넌트로 데이터를 직접 전달해야합니다. 자식 컴포넌트에서는 부모 컴포넌트로 데이터를 넘겨줄 수 없습니다...

2. Props Drilling을 막는것을 도움

📖 Props Drilling
	props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를
    거치면서 한 부분에서 다른 부분으로 데이터를 전달하는 과정

---

App = ({theme}) => {
   	return(
       	<Header theme={theme} />
	)
}
   
Header = ({ theme }) => {
  return (
 	  	<>
    		<User theme={theme} />
   			<Login theme={theme} />
    		<Menu theme={theme} />
 		</>
	);
}

---

이렇게 props 전달이 3~5 정도라면 Props Drilling이 문제가 되지 않습니다. 하지만 props 전달이 10개, 15개 같이 많아지면 코드를 읽을 때 해당 props를 추적하기가 어려워집니다.

❓그래서 Context가 뭐니?

리액트 버전 16부터 가능한 내장 API입니다.
컴포넌트들이 props를 사용하지 않고, 데이터를 넘겨주며 사용할 수 있게 도와줌으로써 데이터 공유를 쉽게 할 수 있게 합니다.

🪚Context API 사용 방법!!

1. createContext 메서드를 사용하여 context 생성하기
2. 생성된 context를 가지고, context provider로 컴포넌트 트리 감싸기
3. value prop을 사용하여 context provider에 원하는 값을 입력하기
4. context consumer을 통해 필요한 컴포넌트에서 값을 불러오기

---

import { createContext, useContext } from "react";

const UserContext = React.createContext("default value");

const App = () => {
	return(
    	<UserContext.Provider value="Hello">
        	<User/>
        </UserContext.Provider>
    )
}

User = () => {
	return(
    	<UserContext.Consumer>
        	{ value => <h1>{value}</h1> } 
            {/* Hello 출력됨 */}
        </UserContext.Consumer>
    )
}

---

• react.createContext() 를 이용하여 UserContext 변수 만들기
  → 괄호안에 초기값을 넣을 수 있습니다
• 값을 내려줘야하는 컴포넌트를 UserContext.Provider 로 감싸주기
  → 전달해주고 싶은 값을 넣어주면 됩니다. (위에 코드에서는 value="Hello"가 전해주고 싶은 값입니다)
• 값을 사용하고 싶으면 UserContext.Consumer로 감싸주기
  → 전달된 값을 사용하기 위해서는 render props패턴을 이용해야합니다. 근데 render props패턴... 좀 이상..

😤useContext 훅을 사용합시다!

render props 패턴말고 useContext를 이용하여 context 사용 가능합니다.

const UserContext = React.createContext();
App = () => {
  return (
    <UserContext.Provider value="Hello">
      <User />
    </UserContext.Provider>
  )
}
User = () => {
  const value = React.useContext(UserContext);
  return <h1>{value}</h1>;
}

❗Context API 주의사항

context가 내려주는 값을 업데이트하는 것은 성능상의 문제로 권장하지 않습니다!!
→ 리렌더링을 초래하는 문제점이 있습니다.

만약 context provider에 객체를 내려주고 그 객체의 프로퍼티가 업데이트 된다면, context가 사용되는 모든 컴포넌트는 리렌더링됩니다.
그래서 context는 변경이 자주 일어나지 않는 데이터에서 사용하는 것이 좋습니다.

👩‍💻 처음으로 글을 쓰면서

velog에 글을 처음 써보면서 설명을 잘 못한다는 생각이 들었다. 설명을 잘 못하는 이유를 생각해 보면, 개념 이해가 완벽하지 못하다는 생각을 했다.
개념에서 잘못된 내용이 있으면 알려주세요!...
글을 읽어주셔서 감사합니다!