Section 10: Effects, Reducers & Context - Advanced, yet super-important Features!

The goals

💪🏻Working with (Side) Effects

✌🏻Managing more Complext State with Reducers

👍🏻Managing App-Wide or Component-Wide State with Context

 

 

Let's learn with the small project!

1. We wanna keep our page authenticated even after we reloading the page!

For that, we use 'localstorage' and gonna check on the webpage

and write the code like this so when we get email and password then we set our login status as 'isLoggedIn' and key as '1' 

But here the issue is that since React rerenders the webpage every time if there's some update we will be in the loop that we change our status to logged in and rerender and change the status and rerender.....

So here we should use something different from using 'State'

And we put these codes in useEffect().

So the order will be

1. run the component funtions

2. check useEffect and execute the function in it

3. re-run the component

 

It won't run after every component evaluation, but only if the dependencies in useEffect changes.

 

So when the app starts for the first time then that will be the case.

If this component function runs for the very first time because our app just started, then the dependencies are considered to have change but we have no dependencies here.

But once it ran for the first time for example, with this set up here, we have no dependencies but therefore of course they also didn't change compared to the first execution cycle.

So therefore this anonymous function here would indeed only run once when the app starts because thereafter the dependencies never changes.

Since we want to run this code only one time, we intentionally put no dependency here.

 

So once the code starts,

1. the code runs

2. we update our state by using useState

3. update triggers this component to run again

4. and JSX code is evaluated and update DOM accordingly

5. useEffect will run again only when we have some change of our dependencies we set

 

So based on this logic, even if we re-load the page still we can keep our login status.

Because we don't reload the page until the dependency has been changed

 

 

UseEffect & Dependencies

Now we will apply useEffect for the validation

So first of all, for the emailChangeHandler we can put dependency as email so everytime when the email changes, we can reload this page.

So we import 'useEffect' and bring the code fom emailChangeHandler

And we don't have to use event.target.value since we are not getting event so we can just define variable and put the vlaue there.,

And we can put dependencies something we use inside of useEffect()

So that we put function itself as dependency, it means that we add a pointer at this function. So every login component function executes, it will re-run this useEffect function but only if either setFormIsValid or enteredEmail or enteredPassword changed in the last component rerender cycle.

 

Acutally we can omit this 'setFormIsValid' because those state updating functions by default are ensured by React to never change. So these functions (below pic) will always be the same.

So this is also one of the advantages of useEffect that we don't have to write a long code to check some things are changed then what we should do

 

It's side effect of the user entering data.

UseEffect is, in general, a super important hook that helps you deal with code that should be executed in response to something.

And something could be the component being loaded.

 

종속성으로 추가할 항목 및 추가하지 않을 항목

이전 강의에서 useEffect() 종속성에 대해 살펴보았습니다.

effect 함수에서 사용하는 "모든 것"을 종속성으로 추가해야 함을 배웠습니다. 즉, 거기에서 사용하는 모든 상태 변수와 함수를 포함합니다.

맞는 말이지만 몇 가지 예외가 있습니다. 다음 사항을 알고 있어야 합니다.

• 여러분은 상태 업데이트 기능을 추가할 필요가 없습니다. (지난 강의에서 했던 것처럼 setFormIsValid 사용): React는 해당 함수가 절대 변경되지 않도록 보장하므로 종속성으로 추가할 필요가 없습니다.
• 여러분은 또한 "내장" API 또는 함수를 추가할 필요가 없습니다 fetch(), 나 localStorage 같은 것들 말이죠 (브라우저에 내장된 함수 및 기능, 따라서 전역적으로 사용 가능): 이러한 브라우저 API/전역 기능은 React 구성 요소 렌더링 주기와 관련이 없으며 변경되지 않습니다.
• 여러분은 또한 변수나 함수를 추가할 필요가 없습니다. 아마도 구성 요소 외부에서 정의했을 겁니다 (예: 별도의 파일에 새 도우미 함수를 만드는 경우): 이러한 함수 또는 변수도 구성 요소 함수 내부에서 생성되지 않으므로 변경해도 구성 요소에 영향을 주지 않습니다 (해당 변수가 변경되는 경우, 또는 그 반대의 경우에도 구성 요소는 재평가되지 않습니다)

간단히 말해서: effect 함수에서 사용하는 모든 "것들"을 추가해야 합니다. 구성 요소(또는 일부 상위 구성 요소)가 다시 렌더링 되어 이러한 "것들"이 변경될 수 있는 경우.그렇기 때문에 컴포넌트 함수에 정의된 변수나 상태, 컴포넌트 함수에 정의된 props 또는 함수는 종속성으로 추가되어야 합니다!

다음은 위에서 언급한 시나리오를 더 명확히 하기 위해 구성된 더미 예입니다.

import { useEffect, useState } from 'react';
 
let myTimer;
 
const MyComponent = (props) => {
  const [timerIsActive, setTimerIsActive] = useState(false);
 
  const { timerDuration } = props; // using destructuring to pull out specific props values
 
  useEffect(() => {
    if (!timerIsActive) {
      setTimerIsActive(true);
      myTimer = setTimeout(() => {
        setTimerIsActive(false);
      }, timerDuration);
    }
  }, [timerIsActive, timerDuration]);
};

이 예에서:

• timerIsActive 는 종속성으로 추가되었습니다. 왜냐하면 구성 요소가 변경될 때 변경될 수 있는 구성 요소 상태이기 때문이죠(예: 상태가 업데이트되었기 때문에)
• timerDuration 은 종속성으로 추가되었습니다. 왜냐하면 해당 구성 요소의 prop 값이기 때문입니다 - 따라서 상위 구성 요소가 해당 값을 변경하면 변경될 수 있습니다(이 MyComponent 구성 요소도 다시 렌더링되도록 함).
• setTimerIsActive 는 종속성으로 추가되지 않습니다. 왜냐하면예외 조건이기 때문입니다: 상태 업데이트 기능을 추가할 수 있지만 React는 기능 자체가 절대 변경되지 않음을 보장하므로 추가할 필요가 없습니다.
• myTimer 는 종속성으로 추가되지 않습니다. 왜냐하면 그것은 구성 요소 내부 변수가 아니기 때문이죠. (즉, 어떤 상태나 prop 값이 아님) - 구성 요소 외부에서 정의되고 이를 변경합니다(어디에서든). 구성 요소가 다시 평가되도록 하지 않습니다.
• setTimeout 은 종속성으로 추가되지 않습니다 왜냐하면 그것은 내장 API이기 때문입니다. (브라우저에 내장) - React 및 구성 요소와 독립적이며 변경되지 않습니다.

CleanUp Functions in UseEffect

We can write code like this and if we check on the webpage, we can see that every time if there's keystroke if will console.log

What if we have more complicated code like sending HTTP requests or verify data from server? We don't want to get through those actions by every key stroke.

So we can maybe make a way to check it after some time later or after we put some length of character.

Here we will check when the user stops typing for a while, and understand it as the finishing time of inputting data.

We call this 'Debouncing'

 

Debouncing

Debouncing is a programming pattern or a technique to restrict the calling of a time-consuming function frequently, by delaying the execution of the function until a specified time to avoid unnecessary CPU cycles, and API calls and improve performance.

 

So we can put 'setTimeout' and put the code inside of it.

So after some set seconds, it will work.

The trick is that we actually save the timer and for the next key stroke we clear it.

So that we only have one ongoing timer at a time and only the last timer will complete.

How can we make it?

If we write a code like this then after setting time our console.log("checking form validity' works first and then if we type then also console.log('cleanup') would work together.

So based on this, if we put clearTimeout in the place we put 'cleanup' console.log then it will clean after setTimeout effect.

So if we do like this then we can see that checking form validity only occurs one time and many cleanup

 

If we do like this and how it will work?

every time if we click somewhere or key stroke, it will console.log cause useEffect works after every rendering component cycle.

But what if we put empty array '[]' as dependency in useEffect?

then it will only work for the first time this component was mounted and rendered, but not for any subsequent rerender cycle.

 

But it doesn't mean that since it's more powerful we should always use this.

Because it needs more set up to use and it's more complicated scenario.

 

For the same case we have done like emailChangeHandler and passwordChangeHandler

If we don't useState then since we are not managing the state, when this code runs, it might not contain the latest entered password because of how React schedules state updates.

So we got advised to use function form but again, it's not available here because we are depensing on two other states and not the last snapshot of this form validity state.

This is another scenario where we could use 'useReducer', a good replacement of useState.

When we have states that belongs together, like here, with the entered value and the validity of the value and or if we have state updates that depends on other state.

Here we are checking enteredEmail which is another state to set emailIsValid state which is different state.

 This is something we shouldn't do 

check the below pic

And this is a scenario where useReducer is always a good choice.

If you update a state which depends on another state, then merging this into one state could be a good idea.

And we can do that without useReducer as well.

 

So how can we use reduecer for email verification

 

We made emailReducer function outside of the component function.

It's because inside of this reducer function we won't need any data that's generated inside of the component function.

So this reducer function can be created outside of the scope of this component function because it doesn't need to interact with anything defined inside of the component function.

And all the data which will be required and used inside of the reducer function will ba passed into this function when it's executed by React, autmoatically.

 

This reducer function receives two arguments, two parameters.

Out last state snapshot and the action that was dispatched and we will see what this action would be in just a second.

And we should return a new state. Our new state can be an object where we have the value, which is initiallly an empty string.

 

So now since we can use the state of email, we can fix our code like this:

enteredEmail -> emailState.value

emailIsValid -> emailState.isValid

 

So we don't have to take snapshot by using 'useState' since we are managing the state of it with useReducer

 

We need to dispatch an action eventually. We need to dispatch it, for example, at emailChangeHandler, when we want to update the value OR 

here, when we want to update the validity.

Let's start with the value.

 

Here now we update this by calling 'dispatchEmail' and we pass to it as so-called action.

It's totally up to us what this action is.

It can be a string identifier, something like 'NEW_EMAIL_VALUE' or it could be a number but often will be an object which has some field that holds some identifier.

Usually the field is named type so here it can be something like 'USER_INPUT'.

It doesn't have to be all caps but that's just a convention we see a lot.

And then we can also add an extra payload to this action.

So for example, a val field, that holds the event.target.value.

 

So! now this is our action!

It's this object with a type field that describes what happened and extra payload in this case, the value the user entered.

This will trigger this function (emailReducer) to execute because that's the reducer function we passed to useReducer.

 

Now here we can handle this action, for example, with the if statement.

We can check if action.type is equal to user input.

One thing we should keep it mind is that what we dispatch as an action will be an object because that's what we set it to here (in action 'emailChangeHandler')

Now then we don't want to return the empty state snapshot, instead, we want to return the state snapshot for our email where the value is action.val.

That's the payload we appended to our action.

And maybe we also want to update the validity here if we're already added.

Simply by checking if action is valid then the same rule we had before.

**but it should be isValid: action.val.includes('@')

So we put the rule we should check to change the isValid status.

And for any other action that might reach this reducer, this default state will be returned.

 

Okay now we need to dispatch the action.

At validateEmailHandler

 

Understand Agian 'UseReducer'

useReducer 이해하기

우리가 이전에 만든 사용자 리스트 기능에서의 주요 상태 업데이트 로직은 App 컴포넌트 내부에서 이루어졌었습니다. 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었는데요, 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법이 있습니다. 바로, useReducer 를 사용하는건데요, 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있지요.

 

App 컴포넌트에서 useReducer 를 사용해보기전에 우리가 useState 를 처음 배울 때 만들었던 Counter.js 컴포넌트에서 useReducer 를 사용해보겠습니다.

// Counter.js
import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  };

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

useReducer Hook 함수를 사용해보기전에 우선 reducer 가 무엇인지 알아보겠습니다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다.

 

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됩니다.

여기서 action 은 업데이트를 위한 정보를 가지고 있습니다. 주로 type 값을 지닌 객체 형태로 사용하지만, 꼭 따라야 할 규칙은 따로 없습니다.

액션의 예시들을 확인해볼까요?

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}
// 카운터에 1을 빼는 액션
{
  type: 'DECREMENT'
}
// input 값을 바꾸는 액션
{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: 'tester@react.com'
}
// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'useReducer 배우기',
    done: false,
  }
}

보신 것 처럼 action 객체의 형태는 자유입니다. type 값을 대문자와 _ 로 구성하는 관습이 존재하기도 하지만, 꼭 따라야 할 필요는 없습니다.

자, 이제 reducer 를 배웠으니 useReducer 의 사용법을 알아봅시다. useReducer 의 사용법은 다음과 같습니다.

 

const [state, dispatch] = useReducer(reducer, initialState);

 

여기서 state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생시키는 함수라고 이해하시면 됩니다. 이 함수는 다음과 같이 사용합니다: dispatch({ type: 'INCREMENT' }).

그리고 useReducer 에 넣는 첫번째 파라미터는 reducer 함수이고, 두번째 파라미터는 초기 상태입니다.

그럼, Counter 컴포넌트를 만약에 useReducer 로 구현한다면 어떻게 바뀌는지 알아볼까요?

다음 코드를 한번 따라서 작성해보세요.

 

// Counter.js
import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const onDecrease = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

useReducer vs useState - 뭐 쓸까?

자 이제 궁금해지는 점이 한가지 있을 것입니다. 어떨 때 useReducer 를 쓰고 어떨 때 useState 를 써야 할까요? 일단, 여기에 있어서는 정해진 답은 없습니다. 상황에 따라 불편할때도 있고 편할 때도 있습니다.

예를 들어서 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 확실히 useState 로 관리하는게 편할 것입니다.

const [value, setValue] = useState(true);

하지만, 만약에 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는 것이 편해질 수도 있습니다.

이에 대한 결정은, 앞으로 여러분들이 useState, useReducer 를 자주 사용해보시고 맘에드는 방식을 선택하세요.

저의 경우에는 setter 를 한 함수에서 여러번 사용해야 하는 일이 발생한다면

setUsers(users => users.concat(user));
setInputs({
  username: '',
  email: ''
});

그 때부터 useReducer 를 쓸까? 에 대한 고민을 시작합니다. useReducer 를 썼을때 편해질 것 같으면 useReducer 를 쓰고, 딱히 그럴것같지 않으면 useState 를 유지하면 되지요.

 

 

I finished the small mission to make my own password reducer but I didn't know where to start.

Let's organize the steps

 

1. define reducer function first

  e.g. passwordReducer (which will be the parameter inside of useReducer)

  we can just copy from emailrReducer

  action names can be the same?

2. 

 

 

I wrote here like this. But since we check the validation upper code in 'passwordReducer' we don't have to write like this. Instead we can just write 'passwordState.isValid'

 

And this is important concept if it validity is passed, then we don't console.log again.

So we don't print "Checking form validity" anymore once they pass the validation.

And this will not reset until the destructured object has been updated.

 

중첩 속성을 useEffect에 종속성으로 추가하기

이전 강의에서 우리는 useEffect()에 객체 속성을 종속성으로 추가하기 위해 dstructuring을 사용했습니다.

const { someProperty } = someObject;
useEffect(() => {
  // code that only uses someProperty ...
}, [someProperty]);

이것은 매우 일반적인 패턴 및 접근 방식이며, 이것이 제가 일반적으로 이 방식을 사용하는 이유이며 여기서 보여드리는 이유입니다(코스 내내 계속 사용할 것입니다).

핵심은 우리가 destructuring을 사용한다는 것이 아니라, 전체 개체 대신 특정 속성을 종속성으로 전달한다는 것입니다.

우리는 이와 같이 코드를 작성할 수도 있으며 같은 방식으로 작동합니다.

useEffect(() => {
// code that only uses someProperty ...
}, [someObject.someProperty]);

이것은 잘 작동합니다!

하지만 여러분은 이 코드 사용을 피해야 합니다:

 

useEffect(() => {
  // code that only uses someProperty ...
}, [someObject]);

왜 그럴까요?

왜냐하면 effect 함수는 someObject 가 변경될 때마다 재실행되기 때문이죠 - 단일 속성이 아닙니다 (someProperty 위의 예에서)

 

 

 

 

Context 란?

Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데요, 꼭 전역적일 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋습니다.

Props로만 데이터를 전달하면 발생할 수 있는 문제

리액트 애플리케이션에서는 일반적으로 컴포넌트에게 데이터를 전달해주어야 할 때 Props를 통해 전달합니다. 그런데 깊숙히 위치한 컴포넌트에 데이터를 전달해야 하는 경우에는 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 하기 때문에 불편하고 실수할 가능성이 높아지죠.

function App() {
  return <GrandParent value="Hello World!" />;
}

function GrandParent({ value }) {
  return <Parent value={value} />;
}

function Parent({ value }) {
  return <Child value={value} />;
}

function Child({ value }) {
  return <GrandChild value={value} />;
}

function GrandChild({ value }) {
  return <Message value={value} />;
}

function Message({ value }) {
  return <div>Received: {value}</div>;
}

이러한 코드를 Props Drilling 이라고 부릅니다. 컴포넌트를 한 두개정도 거쳐서 Props를 전달하는거라면 괜찮지만 이렇게 4개정도를 거쳐서 전달하게 된다면, 너무 불편할 것입니다. 예를 들어서 Message 컴포넌트를 열어서, 이 value 값이 어디서 오는건지 파악하려고 한다면 그 상위 컴포넌트로 타고 또 타고 거슬러 올라가야 하기 때문에 매우 불편합니다. 또는, value 라는 네이밍을 message 로 변경을 하고 싶어진다면, 통일성을 맞추기 위해서 또 여러 컴포넌트들을 수정해야 하니까 그것도 그것대로 불편합니다.

또 다른 예시를 확인해볼까요? 우리가 컴포넌트를 만들 때, 여러 종류의 자식 컴포넌트가 특정 값에 의존을 한다고 가정을 해봅시다. 다음과 같이 말이죠.

function App() {
  return (
    <AwesomeComponent value="Hello World" />
  )
}

function AwesomeComponent({ value }) {
  return (
    <div>
      <FirstComponent value={value} />
      <SecondComponent value={value} />
      <ThirdComponent value={value} />
    </div>
  )
}

function FirstComponent({ value }) {
   return (
     <div>First Component says: "{value}"</div>
   )
}

function SecondComponent({ value }) {
   return (
     <div>Second Component says: "{value}"</div>
   )
}

function ThirdComponent({ value }) {
   return (
     <div>Third Component says: "{value}"</div>
   )
}

지금의 경우에는 각 컴포넌트가 하나의 Props만 받아오기 때문에 많이 복잡해보이지 않을 수 있지만, 만약 각 컴포넌트에 더 다양한 Props가 들어있고, 컴포넌트도 더 다양하고 구조가 좀 더 까다로웠다면, 가독성이 떨어질 수 도 있습니다.

앞서 언급한 문제들은 Context 를 사용하면 깔끔하게 해결할 수 있습니다.

Context 사용법

Context 는 리액트 패키지에서 createContext 라는 함수를 불러와서 만들 수 있습니다.

import { createContext } from 'react';
const MyContext = createContext();

Context 객체 안에는 Provider라는 컴포넌트가 들어있습니다. 그리고, 그 컴포넌트간에 공유하고자 하는 값을 value 라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근을 할 수 있습니다.

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <GrandParent />
    </MyContext.Provider>
  );
}

이렇게 하면, 원하는 컴포넌트에서 useContext 라는 Hook을 사용하여 Context에 넣은 값에 바로 접근할 수 있습니다. 해당 Hook의 인자에는 createContext로 만든 MyContext를 넣습니다.

import { createContext, useContext } from 'react';

function Message() {
  const value = useContext(MyContext);
  return <div>Received: {value}</div>;
}

이렇게 하면 중간 중간 여러 컴포넌트를 거쳐 전달하던 Props를 지워주어도 되지요. 이제 전체 코드를 확인해볼까요?

import { createContext, useContext } from 'react';
const MyContext = createContext();

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <GrandParent />
    </MyContext.Provider>
  );
}

function GrandParent() {
  return <Parent />;
}

function Parent() {
  return <Child />;
}

function Child() {
  return <GrandChild />;
}

function GrandChild() {
  return <Message />;
}

function Message() {
  const value = useContext(MyContext);
  return <div>Received: {value}</div>;
}

export default App;

코드 링크

어떤가요, 훨씬 깔끔하죠?

아까전에 봤던 두번째 코드 예시에도 Context를 적용한 예시를 확인해 봅시다.

import { createContext, useContext } from 'react';
const MyContext = createContext();

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <AwesomeComponent />
    </MyContext.Provider>
  );
}

function AwesomeComponent() {
  return (
    <div>
      <FirstComponent />
      <SecondComponent />
      <ThirdComponent />
    </div>
  );
}

function FirstComponent() {
  const value = useContext(MyContext);
  return <div>First Component says: "{value}"</div>;
}

function SecondComponent() {
  const value = useContext(MyContext);
  return <div>Second Component says: "{value}"</div>;
}

function ThirdComponent() {
  const value = useContext(MyContext);
  return <div>Third Component says: "{value}"</div>;
}

export default App;

AwesomeComponent에서 내부의 각 컴포넌트들에게 Props를 설정해주는 것이 아니라, 각 컴포넌트에서 원하는 값을 useContext로 가져오는 방식으로 바뀌었습니다.

위 코드처럼 만약 Context가 여러 컴포넌트에서 사용되고 있다면 다음과 같이 커스텀 Hook을 만들어서 사용하는것도 정말 좋은 방법입니다.

 

 

 

 

 

 

 

 

Sources

https://blog.bitsrc.io/what-is-debounce-in-javascript-a2b8e6157a5a

What is Debounce in JavaScript?

https://react.vlpt.us/basic/20-useReducer.html

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook

https://velog.io/@velopert/react-context-tutorial

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법