LearnFit
YouTube, Learn useContext In 13 Minutes
[React - 요약, 번역] 13분 안에 익히는 useContext
#전체
#개발자
#프론트엔드
#webdevsimplified
#react hooks
#react tutorial
#react js tutorial
#react hooks tutorial
#react hooks project
#learn react hooks
#learn react js
#react beginner
#javascript
#js
#learn usecontext in 10 minutes
#usecontext
#react js usecontext
#usecontext hook
#react usecontext hook
#usecontext tutorial
#reactjs usecontext
#react js usecontext tutorial
#use context react js
#learn react usecontext
#react usecontext js
#react context hook
#react context function
#react context
#react
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:09클래스 컴포넌트 방식(건너뛰기)
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 컴포넌트가 감싸게 될 컴포넌트들을 의미합니다.
12:52영상 끝
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기