useContext?
- 기존에는 컴포넌트간 데이터를 전달하려면 props를 사용해서 부모로부터 자식에게 전달해줘야 했습니다!
- props의 기본형태는
- 자 그런데 페이지의 수가 많아지고 중간 컴포넌트에서는 데이터가 필요하지 않을수 있습니다.
- 이런식으로 방대한 양의 리액트가 존재할때 가장 마지막 자식에게 데이터를 전달할때 props를 사용하면 코드도 복잡하고 하나가 바뀌면 모든 컴포넌트를 바꿔줘야한다는 단점이 있습니다.
- 이점을 해결하기위해 useContext를 사용한다!
useContext를 사용하기 위해선?
먼저 createContext 를 사용한 파일로 기본값을 지정해줍니다!
createContext에 값을 넣어주는 이유는 만약 provider의 value값이 지정되지 않았을때 받는 값을 지정해주기 위해서 입니다!
다크모드를 활용한 Context 활용법!
가장먼저 context!
- 우리가 사용할 component는 먼저 Context, Page, Header,content, Footer 로 설정했다!
- 위에 보이듯이 사용할 context를 import 시켜주고 넘길 데이트를 provider를 사용해 component를 감싸준다!
- 지금은 isDark 와 setIsDark 두가지의 값을 넘겨줘야하니 오브젝트화 시켜서 넘겨준다!
다음은 Page!
- 기존에는 props로 받은 값을 각각의 자식 component에게 값을 지정해 넘겨줘야 했지만 context를 사용하면 한번에 똭! 넣기만 하면된다! 이것이 바로 context를 사용하는 이유!!!
그 다음 자식요소는 두개의 데이터 모두를 받는 footer로 확인해보자!
결과물까지 확인해보자!
완성!
본 페이지는 유튜브 별코딩님의 영상을 참고 하였습니다.
728x90
'REACT' 카테고리의 다른 글
| React Hooks 6.useCallback (0) | 2022.11.21 |
|---|---|
| React Hooks 5.useMemo (0) | 2022.11.21 |
| React Hooks 3.useRef (0) | 2022.11.19 |
| React Hooks 2.useEffect (0) | 2022.11.17 |
| React Hooks 1.useState (0) | 2022.11.17 |