00:00강의 팁: 해당 강의는 넘겨주려는 곳과 받으려는 곳, 이렇게 두 측면에서 접근하면 이해하기가 더욱 수월합니다.
*01:14부터 학습을 시작해주세요.
00:00영상 개요(영상 속 내용과는 무관한 필기)
React의 useContext hook을 설명하는 영상에 대해 요약 및 번역에 집중한 해설노트입니다.
더욱 자세한 정보는 리액트 공식문서의 useContext 파트를 참조해보세요!
https://reactjs.org/docs/hooks-reference.html#usecontext
01:14~03:08 코드 살펴보기
<ThemeContext.Provider> 밑으로 위치하는 모든 컴포넌트에서는 <ThemeContext.Provider>의 value prop에 접근가능합니다. 마치 전역변수처럼 말이죠.
심지어 <FunctionContextComponent color={darkTheme} /> 처럼 직접 prop을 입력해줄 필요도 없습니다.
참고하기:
<ThemeContext.Provider>를 사용하기 위해선 우선
export const ThemeContext = React.createContext();
를 App 컴포넌트 밖에서 입력해야합니다.
*import React, {createContext} from 'react'; 도 코드 윗 줄에 필요
넘겨주려는 곳에서 해야하는 것 요약:
1. createContext import하기
2. createContext로 context 객체 만들기
3. context 객체 export 하기
4. context 객체.Provider로 컴포넌트들 감싸주기
5. 넘길 값을 value에 넣기
03:49함수형 컴포넌트 방식
비어있는 코드를 먼저 보여줍니다. 코드를 작성해가며 시청자를 이해시키기 위함입니다.
코드 이해:
앞서 <ThemeContext.Provider> 밑으로 위치하는 모든 컴포넌트에서 <ThemeContext.Provider>의 value에 접근가능하다고 했는데요, 이 value에 접근하려는 컴포넌트에선 ThemeContext가 필요합니다. ThemeContext가 선언된 곳이 어디었죠? 바로 App.js입니다. 그리고 ThemeContext는 export 처리 되어있기 때문에 사용하려는 컴포넌트에서 import 하기만 하면 사용가능합니다.
그리고 또 하나, useContext가 필요한데요, import { useContext } from 'react'로 import 해와야합니다. 이제 준비물은 다 갖춰졌네요. (ThemeContext, useContext)
FunctionContextComponent 안에서
const darkTheme = useContext(ThemeContext);를 하면 darkTheme에는 ThemeContext.Provider에서 value로 넣어주었던 값을 가져올 수 있게 되는 것입니다.
사용하려는 곳에서 해야하는 것 요약:
1. useContext를 import 합니다.
2. createContext로 만들었던 context 객체를 import합니다.
3. useContext(context객체)를 해서 value를 가져옵니다.
05:12~05:45 함수형 컴포넌트가 클래스형 컴포넌트의 context 방식보다 간결한 점이 큰 장점이라고 말합니다.
05:46코드 분리:
App 컴포넌트로부터 context provider와 상태관리 코드를 분리시켜 ThemeProvider 컴포넌트를 생성합니다. 전달되어야할 데이터(darkTheme, toggleTheme)와 전달할 Provider, 전달 받는 곳에서 사용할 커스텀훅을 ThemeProvider에서 묶어 관리하게 됨으로써 용도에 따른 코드 분리가 이뤄졌고 다른 컴포넌트와의 관계성 또한 명확해집니다. (App 컴포넌트에서 ThemeProvider를 import하고 그 내부에 다른 자식 컴포넌트를 위치시키면 ThemeProvider의 데이터를 전달받게 된다는 것이 눈으로 봐도 명확해짐 - <ThemeProvider></ThemeProvider> 코드 두 줄이면 이해됨)
또한 children 컴포넌트 입장에서도 data 사용이 간편해집니다. ThemeProvider가 custom hook으로 export해주기 때문에 사용할 곳에서는 그저 import해서 호출만해주면 되기 때문입니다.
07:30children은 컴포넌트에 default로 존재하는 prop이며 ThemeProvider 컴포넌트가 감싸게 될 컴포넌트들을 의미합니다.
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.