React useContext

useContext가 생겨난 이유

리액트를 사용하다보면 props로 컴포넌트간의 값을 전달해줄때가 있는데
컴포넌트의 수가 많아지고 자식이 많아지면 그 값을 props로 전달하는데 한계가 있다
(오류가 났을때 디버깅시 오래걸릴 수 있기때문)
그래서 생겨난것이 useContext훅이고
컴포넌트를 하나 만든후 전역적으로 데이터값을 받아서 사용할 수 있기에 유지보수에 용이할 것으로 생각된다

사용방법

1. context에 사용될 컴포넌트를 하나 만들어준다. ex...(./store/SampleContext.js)
2. 컴포넌트에 createContext를 import하고 기본값으로 사용될 인자를 괄호안에 넣어준다 (provider or value가 없을경우 넘겨질 기본값)

SampleContext.js

import {createContext} from "react";

export const SampleContext = createContext(null);

3. app.js에서 해당 context값을 받을 컴포넌트를 context명.Provider태그로 감싸준다 (provider는 value를 받는다)

app.js

import {SampleContext} from '경로'

function App(){
	const [text,setText] = useState(false)
    return (
    	<SampleContext.Provider value={text}>
        	<User />
        </SampleContext.Provider>
    )
}

4. 프롭스를 필요로하는 자식컴포넌트에 가서 context컴포넌트 import후 불러와준다.

import react,{useContext} from 'react'
import {SampleContext} from '경로'

const Use = () => {
	const text = useContext(SampleContext)
	return (
    	<div>
        	{text}
        </div>
    )
}

후기

사용해보니 토이 프로젝트에서 react-router-dom을 사용했는데 여기선 routes들만 존재해야 한다는 오류가 떠서 아직 value값까지 설정해서 넘기진 못했는데
원하는 컴포넌트에 import해서 값을 띄워보는덴 성공했다

아직 토이프로젝트나 포폴용 작업같은 소규모 밖에 안해봐서 사용할일이 크게 없었는데 큰작업에서는 아주 편리하게 사용될것 같아 공부를 해두면 좋을것 같다는 생각이 들었다😎

글을 쓰는데 참고한 링크
https://youtu.be/LwvXVEHS638