2022년 04월 19일

📚 오늘 도전하고, 배운 것

알고리즘

• Brute-Force-Search-Algorithm
• BAEKJOON-2231

useReducer

• JavaScript reduce 메서드가 생각났다.
• 여러 state가 함께 변경되거나 서로 관련된 경우에 관리가 어려워질 수 있는데 이때 useState 대신 useReducer를 사용한다.
• 예시 코드로 학습은 했는데.. 아직 명확하게 이해하지 못했다. 더 공부가 필요하다...

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

• state: 최신 state 스냅샷
• dispatchFn: state를 업데이트할 수 있게 해주는 함수
  • 새로운 state 값을 설정하는게 아니라 액션을 디스패치한다.
  • 액션은 useReducer의 첫 인수 => reducerFn
• reducerFn ((prevState, action) => newState)
  • prevState, 최신 state 스냅샷을 자동으로 가져온다. (첫 인수)
  • action: 이 리듀서 함수 실행을 트리거하는 액션
  • 새로 업데이트된 state를 반환한다.
    • useState의 함수 폼과 비슷하다. 확장한 버전이라고 보면 된다.
• initalState 초기 값
• initFn: 초기 state를 설정하기 위해 실행해야 하는 함수, 초기 state가 복잡한 경우(ex. http request 결과 등...)

Context-API

• 어떤 state가 앱의 다양한 위치에서 필요할 때, 불필요하게 state만 전달하는 컴포넌트가 있을 수 있다.
• props를 실제로 필요한 컴포넌트에서만 사용할 수 있으면 좋을 것이다. 이를 위해 컴포넌트 전체에서 사용할 수 있는 리액트에 내장된 내부적인 state 저장소가 있는데 바로 "React Context"라는 개념이다.

// src/store/auth-context.js

import React from 'react'

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

export default AuthContext

AuthContext 내부의 자식들은 모두 AuthContext 의 Context에 접근할 수 있다.
아래 코드에서 AuthContext.Provider Wrapper 로 <React.Fragment> 대신 사용할 수 있다

return (
    <React.Fragment>
        <AuthContext.Provider>
            <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
            <main>
                {!isLoggedIn && <Login onLogin={loginHandler} />}
                {isLoggedIn && <Home onLogout={logoutHandler} />}
            </main>
        </AuthContext.Provider>
    </React.Fragment>
)

상태를 사용하는 Consumer는 다음과 같이 설정한다.

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

소비하는 컴포넌트에서 props을 사용할 필요가 없다. 그래서 props를 전달만 하는 부모 컴포넌트에서도 props을 전달할 필요가 없게된다. Consumer에 함수를 사용하는 방법 말고 훅을 사용하는방법이 있다.
Consumer를 사용하는 것보다 훨씬 더 간결하다. 아래 코드는 AuthContext가 변경될 때 Navigation 컴포넌트가 다시 계산된다. (리액트에 의해서)

import React, { useContext } from 'react'
import AuthContext from '../../store/auth-context'

const Navigation = (props) => {
  const ctx = useContext(AuthContext)
  //...
}

• 많은 컴포넌트를 통해 전달하고자 하는 것이 있는 경우에만 , 네비게이션처럼 매우 특정한 일을 하는 컴포넌트에 컨텍스트를 사용하는 것이 좋다.
• props를 사용하는 것과 context를 사용하는 것, 상황에 따라 다르다.
• IDE가 컨텍스트 자동 완성을 하게 하려면 기본 컨텍스트 객체에 dummy 값을 추가해야 한다. 그럼 자동 완성이 된다.
• 변경이 잦은 경우에 사용하는 것은 적합하지 않다.
  • state가 앱 전체에 걸쳐 사용되는데 변경이 자주 일어난다면? -> 더 나은 도구 사용하기

Hooks의 중요한 규칙

1. 리액트 훅은 리액트 함수(리액트 컴포넌트 함수)에서만 호출해야 한다. (커스텀 훅도 마찬가지)
2. 중첩 함수에서 호출하지 말아야 한다. (if문 같은 block문도 마찬가지)

🤔 학습하면서 궁금하거나 어려웠던 점

• useReducer를 사용하는 경우를 명확하게 알아보기

🌅 내일은 무엇을?

• 알고리즘 학습 & 문제 풀이
• React 학습
  • udemy 강의 연습 프로젝트

🖋 log

• 동생과 오늘 "할 수 있다!!"를 연신 외쳤다. 정말 해내고 싶은 것을 해낼 수 있었으면 좋겠다.