[React] 리액트 훅( Context API )

 

https://hyunu0504.github.io/blog10/

React App

 

 

 

 

위 사이트는 props를 사용하지않고 Context API를 사용해서

 

아래 사진의 컴포넌트들로 이루어진 컴포넌트를 만들었다.

 

APP안에있는 state값을 false로 대입하고 

 

하위 컴포넌트에 버튼을 만들어서 버튼 클릭시 state값이 true로 바뀌도록 설정했다.

 

true일때는 background, color를 black, white로 설정했다

 

 

 

 

 

 

 

 

APP컴포넌트의 데이터를 Header, Nav, Section, Aside에 전달한다고 가정할때

 

 

 

 

 

 

 

props는 APP 컴포넌트에서 Main 컴포넌트로 전달하고 또 props로 전달해야 한다

 

 

 

 

 

 

 

 

 

상위 컴포넌트의 state를  하위 컴포넌트에서

props할때 읽기만 가능하고 수정은 불가능 하지만

 

context API는 하위 컴포넌트에서 상위 컴포넌트의 state를 수정할 수 있다,

 

Context API는 props처럼 상위 컴포넌트의 데이터를 사용할때

 

props로 단계적으로 전달하지 않고

 

useContext을 사용해서 필요한 컴포넌트에서만 사용할 수 있다.

 

이렇게 보면 props보다 좋지만 꼭 필요할때만 사용해야한다.

 

단점으로는 useContext를 사용하는 컴포넌트는 재활용이 어려워진다.

 

 

 

 

 

 

useContext 사용법

 

 

 

js파일을 하나 만들고 createContext를 import 하고

 

변수에 담아서 export 해준다 createContext안의 값은 초기값이다.

 

 

 

 

 

 

 

상위 컴포넌트에 방금 만든 변수를 import 한다.

 

 

 

 

 

 

 

 

데이터를 필요로하는 컴포넌트를  createContext로 만든 변수.Provider를 한다

value는 전달하고자 하는 데이터를 뜻한다.

 

위에서는 이렇게하면 ContextComponent 컴포넌트안에 있는 하위 컴포넌트들에서

 

필요하면 props를 거치지 않고 사용할 수 있다.

 

 

 

 

 

 

 

사용하고자하는 컴포넌트에서 useContext를 import하고

createContext로 export한 파일도 import 해준다.

 

 

 

 

 

 

 

 

Provider value에 담았던 데이터를 배열 그대로 변수에 담고 useContext( createContext변수명 )을 작성하면 이제 props없이 

 

상위 컴포넌트에서 전달한 value값을 사용할 수 있다.