[React 완벽 가이드] section 10 : 고급 리듀서(Reducer)를 사용하여 부작용 처리 & 컨텍스트 API

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

117. 모듈 소개

• Effects, ReducersContext
• Working with (Side) Effects
• MAnaging more Complex State with Reducers
• Managing  App - Wide or Component - Wide State with Context

 

118. "Side Effects"이란 무엇이며 useEffect를 소개합니다. 

• Main Job : Render UI & React to User Input
  • Evaluate & Render JSX Manage State & Props React to (User) Events & Input Re-evaluate Component upon State & Prop Changes
  • This all is "backed into" React via the "tools" and features covered in in this course (i.e. useState() Hook, Props ect).
• Side Effects: Anything Else
  • Store Data in Browser Storage Send Http Requests to Backend Servers Set & MAnage Times
  • These tasks must happen outside of the normal component evaluation and render cycle - especially since they might block/ delay rendering (e.g. Http requests)

Handling Side Effects with the useEffect() Hook

useEffect(() => { ... }, [ dependencies ]};

• first parameter : A function that should be executed AFTER every component evaluation IF the specified dependencies changed. Your side effect code goes into this function.
• second parameter : Dependencies of this effect-the function only runs if the dependencies changed. Specify your dependencies of your function here. 

 

119. useEffect() 훅 사용하기

• local storage 활용
• useEffect는 side effects 를 처리하기 위해 존재한다. side effects는 보통 http request 등이다. 이메일 또는 비밀번호 필드의 키 입력에 대한 응답으로 해당 form의 유효성을 확인하고 업데이트 하는 것 또한 side effect 라고 할 수 있다. (이는 사용자 입력 데이터의 side effect라고 할 수 있음)
• 무언가에 대한 응답으로 실행되는 코드를 다루는 데 중요하다. 무언가는 로드되는 컴포넌트일 수도 있고, 업데이트 되는 이메일 주소일 수도 있다. 어떤 액션에 대한 응답으로 실행되는 액션이 있다면 side effects 이다. 

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);

  const loginHandler = (email, password) => {
    localStorage.setItem("isLoggedIn", "1");
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

 

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

• 상태 업데이트 기능
• "내장" API or function
• 변수나 함수

 

122. useEffect에서 Cleanup 함수 사용하기

• 디바운싱, 사용자 입력을 디바은수(그룹화) 하기
• (return) 익명 화살표 함수를 반환하는데, 이를 클린업 함수라고 한다. useEffect가 다음 번에 이 function을 실행하기 전에 clean up 프로세스로써 실행된다. 정확히 말하자면 useEffect 함수가 실행되기 전 (처음 실행되는 경우를 제외하고) 이 clean up 함수가 실행된다.  또한 clean up 함수는 effect를 특정한 컴포넌트가 DOM에서 mount 해제 될 때마다 실행된다. (컴포넌트가 재사용될 때마다)

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);
    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);

→ 처음 로드 되면 "Checking form validity" 이 표시된다. 여기서 뭔가를 타이핑하면, "cleanup" 이 되고, 다시 "Checking form validity" 가 표시된다. 여기에 뭔가를 더 빨리 타이핑 하면 "cleanup"이 많이 보인다. 하지만 "Checking form validity" 은 한번만 표시된다. 즉, 모든 키 입력에 대해서 이 코드는 한번만 실행되었다는 뜻이다. 

→ 만약 http request를 보내는 예제였다면, 수십개가 아닌 한번만 보냈을 것. 

 

123. useEffect 요약

• useEffect besides useState is the most important React hook you have.

Basic

  useEffect(() => {
    console.log("EFFECT RUNNING");
  });

→ effec function runs after every component render cycle. Not before it and not during it, but after it. 

array []

  useEffect(() => {
    console.log("EFFECT RUNNING");
  }, []);

→ This function only executes for the first time this component was mounted and rendered, but not therafter, not for any subsequent rerender cycle

Use dependency

  useEffect(() => {
    console.log("EFFECT RUNNING");
  }, [enteredPassword]);

→ 처음으로 mount 되었을 때 "EFFECT RUNNING" 이 실행된다. 이 경우 email input에 키를 입력해도 아무것도 변경되지 않지만, password input에 key를 입력하면 "EFFECT RUNNING" 가 표시된다. password는 dependency이기 때문! 

clean up function

  useEffect(() => {
    console.log("EFFECT RUNNING");
    return () => {
      console.log("EFFECT CLEANUP");
    };
  }, [enteredPassword]);

 

124. useReducers 및 Reducers 일반 소개 

• useReducer는 내장된 hook으로 state 관리를 도와준다. 그래서 useState와 약간 유사하다. 하지만 더 많은 기능을 갖고 있다. 
• 더 복잡한 state를 관리할 때 유용하다. (e.g. 여러 state이 함께 속해있는 경우 or 여러 state가 같이 바뀌거나 서로 관련된 경우에는 useState를 이용한 state는 종종 사용 및 관리가 어려질 수 있음)
• useReducer는 useState보다 사용하기가 조금 더 복잡해 설정이 더 필요하다. 대부분의 경우에는 useState를 사용하는 게 좋지만, useReducer의 추가 작업을 할만한 가치가 있는 경우 사용하면 좋다. 

 

125. useReducer() hook 사용

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);

• state : The state snapshot used in the component re-render/ re-evaluation cycle
• dispatchFn : A function that can be used to dispatch a new action (i.e. trigger an update of the state)
• reducerFn : (preveState, action) => newState / A function that is triggered automatically once an action is dispatched (via dispatchFn()) - it receives the latest state snapshot and should return the new, updated state.
• initialState. : The initial state
• initFn : A function to set the initial state programmatically

emailState를 useReducer로 관리해보도록 하자. 

 

 const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: "",
    isValid: false,
  });

const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isValid: action.val.includes("@") };
  }

  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.includes("@") };
  }
  return { value: "", isValid: false };
};

reducer function을 컴포넌트 함수 바깥에 만들었다는 것에 주목하자. 리듀서 함수 내부에서는 컴포넌트 함수 내부에서 만들어진 어떤 데이터도 필요하지 않기 때문이다. 따라서 컴포넌트 함수의 범위 밖에서 만들어질 수 있다.

 

126.  userReducer & useEffect

passwordState를 useReducer로 관리해보도록 하자. 

하지만 이는 최적의 코드가 아니다. 

 

  const [formIsValid, setFormIsValid] = useState(false);

여기서 더 중요한 것은 폼 유효성이다. 입력은 전체 폼의 일부이기 때문이다.

 

ex) 
const emailChangeHandler = (event) => {
    dispatchEmail({ type: "USER_INPUT", val: event.target.value });
    setFormIsValid(event.target.value.includes("@") && passowrdState.isValid);
};

여전히 폼 유효성을 다른 state에서 도출하기 때문이다. 이는 리액트의 state 업데이트 Scheduling 때문이다. 

 

리액트의 state 업데이트 Scheduling

변하지 않은 이전의 state를 참조하게 될 수도 있다. state가 useReducer의 setFormIsValid에서 오기 때문이다. 따라서 이는 최적의 코드는 아니다. 또한 기술적으로 함께 속하는 state들이 분활된 것을 원하지 않을 것이다. 다시 주석 처리를 하고,  useEffect를 사용해보도록 하자! 

 

UseEffect 해결법

  const emailChangeHandler = (event) => {
    dispatchEmail({ type: "USER_INPUT", val: event.target.value });
    // setFormIsValid(event.target.value.includes("@") && passowrdState.isValid);
  };

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity");
      setFormIsValid(
        emailState.isValid && passowrdState.isValid
      );
    }, 500);
    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [emailState, passowrdState]);

→ useEffect 안에 있기 때문에 state가 변경될 때마다 확실히 다시 실행된다. 최신 state 값으로!

 

한가지 더 문제 !

effect가 너무 자주 실행되고 있다. 이 코드는 emailState 나 passwordState가 변할때마다 실행된다.  값만 변경된 경우도 있을 수가 있다. 이미 input이 유효한데, 비밀번호에 문자를 추가한 경우라면 바뀌지 않는다. 문자를 추가하기 전에도 유효했고, 이후에도 여전히 유효하다. 

 

object de-structuring

  const { isValid: emailIsValid } = emailState;
  const { isValid: passwordIsValid } = passowordState;

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity");
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);
    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [emailIsValid, passwordIsValid]);

→  alias assignment 사용하기 / de-structuring 구문 살펴보기

→ 깂을 할당하는 것은 아님, 등호의 왼쪽에서 사용하고 있기 때문 / 객체에서는 해당 값을 추출하기 위해 alias를 할당한다. (속성 추출을 위해)

→ isValid 속성을 꺼내어 상수에 저장하고, 각각 이름을 붙여보도록 하자. 이를 alias assignment 라고 한다.  

→ 비밀번호가 6글자 이상일 경우 더이상 useEffect가 발생하지 않는다. 

 

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

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

useEffect()에 객체 속성을 dependencies으로 추가하기 위해 destructuring을 사용했다. 이는 매우 general 한 패턴 접근 방식이다. main point는 destructuring을 사용한다는 것이 아니라, 전체 개체 대신 특정 속성을 dependencies 으로 전달한다는 것이다. 

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

다음과 같이 코드를 작성하여도 작동하지만, 위와 같은 패턴은 피해야 한다. effect 함수는 someObject 가 변경될 때마다 재실행되기 때문이다. 

 

128. State 관리를 위핸 useReducer vs useState

• Generally, you'll know when you need useReducer() : when using useState() becomes cumbersome or you're getting a lot of bugs / unintended behaviors)

useState()

• The main state management "tool"
• Great for independent pieces of state/data
• Greate if state updates are easy and limited to a few kinds of updates

useReducer()

• Greate if you need "more power"
• Should be considered if you have related pieces of state/data
• Can be helpful if you have more complex state updates

129. 리액트 Context(Context API) 소개 

로그인 state는 앱의 다양한 위치에서 필요하거나 사용된다. 이것은 아주 간단한 앱이다. 여기서 state를 이렇게 전달해도 큰 문제는 되지 않는다. 

 

문제가 되는 경우는, state를 여러 컴포넌트를 통해 전달하는 경우이다. 앱이 커질수록 이렇게 하면 더욱 불편해진다. 이렇게 하는 대신 props를 실제로 필요한 데이터를 부모로부터 받는 컴포넌트에서만 사용할 수 있으면 더 좋을 것이다. 부모를 통해 데이터를 전달하지 않도록! 부모는 데이터를 관리하지도 필요하지도 않음. 

 

컴포넌트 전체에서 사용할 수 있는 리액트에 내장된/내부적인 state 저장소가 있고, 이는 react context 라는 개념이다.  이를 사용하면 긴 porps 체인을 만들지 않고도, state를 관련된 컴포넌트에 직접 전달할 수 있다. 

 

130. 리액트 컨텍스트 API 사용

리액트 컨텍스트란, 리액트 내부적으로 state를 관리할 수 있도록 해주는 것이다. 앱의 어떤 컴포넌트에서라도 직접 변경하여 앱의 다른 컴포넌트에 직접 전달할 수 있게 해준다. (프롭체인 없이도)

 

1. src/store 폴더 만들기

2. auth-context.js 파일 추가 (케밥 케이스 사용)

 

provider

<AuthContext.Consumer></AuthContext.Consumer>

 

listener 2 way

1. Auth-Context consumer

<AuthContext.Consumer></AuthContext.Consumer>

→ the consumer is just one way of consuming our Context. 

→  It's an okay-ish why, but i don't like that syntax too much

 

 

2. React Hook

import React, { useContext } from "react";

const ctx = useContext(AuthContext);​

→ it is a bit more elegant and a bit nicer than using AuthContext Consumer

 

131.  useContext 훅으로 컨텍스트에 탭핑(tapping)하기

const Navigation = (props) => {
  const ctx = useContext(AuthContext);
  return (
    <nav className={classes.nav}>
      <ul>
        {ctx.isLoggedIn && (
          <li>
            <a href="/">Users</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <a href="/">Admin</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <button onClick={props.onLogout}>Logout</button>
          </li>
        )}
      </ul>
    </nav>
  );
};

→ This is just a bit more elegant way in my opinion (teacher's opinion)

132. 컨텍스트를 동적으로 만들기 

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        onLogout: logoutHandler,
      }}
    >
      <MainHeader onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
  );

→ isLoggedIn을 전달하는 것 외에도 함수를 전달할 수 있다. (문자열이나 객체 등의 값은 전달할 수 없음) 

→ props은 더이상 Navigation 컴포넌트에 필요 없으므로 제거할 수 있다. 

 

133. 사용자 정의 컨텍스트 제공자 구성 요소 빌드 및 사용

import React from "react";

const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => {},
});

export default AuthContext;

→ IDE 자동 완성을 더 좋게 만들려면 기본 컨텍스트 객체에 onLogout을 추가하는 것이 좋다. (그냥 더미 함수로 넣어도 됨)

 

별도의 컨텍스트 관리 컴포넌트를 만들고 싶다면? 

# auth-context.js 

import React, { useState, useEffect } from "react";

const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => {},
  onLogin: (email, password) => {},
});

export const AuthContextProvider = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);

  const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

  const loginHandler = () => {
    localStorage.setItem("isLoggedIn", "1");
    setIsLoggedIn(true);
  };

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        onLogout: logoutHandler,
        onLogin: loginHandler,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

# index.js

import React from "react";
import ReactDOM from "react-dom/client";

import "./index.css";
import App from "./App";
import { AuthContextProvider } from "./store/auth-context";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>
);

App, Home, Login 컴포넌트에도 추가 작업을 해준다. 

const ctx = useContext(AuthContext);

 

장점

이렇게 하는 것의 장점은 앱 컴포넌트가 더 간결해진다는 것이다. state, authContext 관리를 모두 하나의 파일에서 한다. 

 

134. 리액트 컨텍스트 제한 (Context Limitations)

• React Context is Not optimized for highj frequency changes! (We'll explore a better tool for that, later)
• React Context also shouldn't be used to replace ALL component communications and props (Component should still be configurable via props and short "prop chains" might not need any replacement)

변경이 잦은 경우에, 리액트 컨텍스트는 그다지 적합하지 않는다. 최적화 되어 있지 않기 때문. (공식 리액트 팀원께서 말씀하신 내용) 

더 나은 도구에 대해서는 나중에 이야기 할 예정. 참고로 그 도구 이름은 리덕스(Redux)

 

135. "Hooks의 규칙" 배우기  ✅

• Only call React Hooks in React Functions
  • React Component Functions
  • Custom Hooks (covered later!)
• Only call React Hooks at the Top Level
  • Don't call them in nested functions
  • Don't call them in any block statements
• +extra, unofficial Rule for useEffect(): Always add everything you refer to inside of useEffect() as a dependency! 

 

136. 입력 컴포넌트 리팩토링 

Login Component 에 있는 중복된 input (for id, password) 을 하나의 컴포넌트로 리팩토링 해보자! 

const Input = (props) => {
  return (
    <div
      className={`${classes.control} ${
        props.isValid === false ? classes.invalid : ""
      }`}
    >
      <label htmlFor={props.id}>{props.label}</label>
      <input
        type={props.type}
        id="email"
        value={props.value}
        onChange={props.onChange}
        onBlur={props.onBlur}
      />
    </div>
  );
};

export default Input;

 

137. Forword Refs'에 대해 알아보기 ✅

  const submitHandler = (event) => {
    event.preventDefault();
    if (formIsValid) {
      authCtx.onLogin(emailState.value, passowordState.value);
    } else if (!emailIsValid) {
      emailInputRef.current.activate();
    } else {
      passwordInputRef.current.activate();
    }
  };

→ 에러 발생 

React.forwardRef / useImperativeHandler

• React.forwardRef 와 useImperativeHandler 를 활용하여 해당 에러를 제거할 수 있다. 

 

138. 모듈 리소스 

• 강의 소스코드 참고