2/14 TIL

이 글을 쓰게 된 이유

• 부트캠프에서 메인 프로젝트를 진행하던 중 멘토링이 있었는데, 내가 짠 코드에 대하여 한 컴포넌트가 무수히 많은 props를 내려받는 것을 보고 차라리 useContext를 사용하여 변수를 공유하는 방식으로 하는게 어떻겠냐에서 시작되어 useContext를 공부하게 되었다.

useContext란?

내게 필요한 props를 글로벌하게 사용할 수 있도록 도와주는 Hook.
Props Drilling을 막기 위한 Hook이라고도 할 수 있다.

useContext 사용법

공유할 props 작성하기

import { createContext, useState } from 'react'; // useContext import

export const TestContext = createContext({
	name: '',
  setNameHandler: (name: string) => {},
});

const TestContextProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [name, setName] = useState('');
  
  const setnameHandler = (name: string) => setName(name);
  
  return(
  	<TestContext.Provider value={{ name, setNameHandler}}>
    	{children}
	</TestContext.Provider>
  );
};

export default TestContextProvider;

props를 사용하는 컴포넌트에 감싸기

import TestContextProvider from './utils/context/TestContext';

const App = () => {
return(
  <div className='App'></div>
     <TestContextProvider>
       <ChildrenComponents />		
     </TestContextProvider>
    );
};

export default App;

🖐️ index.jsx(tsx)에서 App 컴포넌트 전체를 감싸는 것도 되지만, 정확히 필요로 하는 컴포넌트에 Provider를 감싸는 것이 앱이 작동하는데에 있어 효율적으로 작동된다.

useContext로 글로벌 props 사용하기

import { useContext } from 'react';
import { TextContext } from './utils/context/TextContext

const ChildrenComponents = () => {
	const { name, setnameHandler } = useContext(TestContext);
  
  	return <div>{name}</div>
};

export default ChildrenComponents;

useContext와 Redux의 차이?

사용법과 구조에 조금 차이가 있을 뿐, 서로 글로벌 props를 만들어내는 것에 있어서 별다른 차이점은 없다. Redux는 Context API를 기반으로 만들어 졌기 때문이기도 하다.
굳이 차이점이 있다면 단순 전역 상태 관리만 필요하다면 useContext를 사용하고, 디버깅이나 로깅 등의 상태 관리 외의 기능이나 미들웨어가 필요하다면 Redux를 사용하는 것이 좋다.