React의 CONTEXT API 및 UseReducer 후크

컨텍스트 API:

Context API는 쉽고 깔끔한 방식으로 React 구성 요소 트리 내에서 상태를 공유하는 방법을 제공합니다. 우리는 소품으로 작업하고 구성 요소로 전달하는 것이 얼마나 지저분하고 짜증나는지 보았습니다. 소품 드릴링이라고도합니다.

따라서 Context API를 사용하여 소품을 부모의 모든 자식에게 전달할 수 있습니다. 각 수준에서 항목을 소품으로 전달하지 않고 부모에서 자식으로 상태를 공유합니다.

공급자, 소비자

따라서 Context API에는 두 부분이 있습니다.

제공자

소비자

Provider는 구성 요소 트리에 제공되며 다른 구성 요소를 래핑할 수 있는 React 구성 요소입니다.

소비자는 공급자를 통해 전달된 데이터 또는 상태를 사용할 수 있습니다.

본질적으로 전 세계적으로 간주되는 데이터를 전달하려는 경우 Context API가 선호된다는 점에 유의하는 것이 중요합니다. 그렇다면 좋은 선택이 아닐까 합니다.

구성 요소 재사용을 조금 더 어렵게 만듭니다.

공급자

import React, { createContext } from 'react';

export const AuthContext = createContext()

function AuthContextProvider(){
    const [isAuth, setIsAuth] = React.useState(false)
    return (
        <AuthContext.Provider value={setIsAuth, isAuth}>
            {this.props.children}
        </AuthContext>
    )
}

export default AuthContextProvider

이제 자식 구성 요소에서 소비자를 사용하려면

import React from 'react'
import { AuthContext } from "../pathToFile"


function LoginForm (){
    const {isAuth, setIsAuth} = React.useContext( AuthContext )
    return(
            <div>
                {isAuth?"LOGGED IN":"LOGGED OUT"}
            </div>
        )
    }
}

// before hooks, for function component we had to write in the following manner

function LoginForm (){

    return(
            <AuthContext.Consumer>
                {(context)=>{
                    const {isAuth} = context;

                    return(
                        <div>
                            {isAuth?"LOGGED IN":"LOGGED OUT"}
                        </div>
                    )
                }}
            </AuthContext.Consumer>
        )
    }
}

방지

https://reactjs.org/docs/composition-vs-inheritance.html

일부 구성 요소는 자식을 미리 알지 못합니다. 이것은 일반 "상자"를 나타내는 사이드바 또는 대화 상자와 같은 구성 요소에 특히 일반적입니다.

예시:

children이라는 prop을 사용하여 자식 요소를 출력에 직접 전달할 수 있습니다.

import React from 'react';
import styles from './Form.module.css'


function Form(props){
    const { children,onSubmit } = props;
    return (
        <form onSubmit={onSubmit} className={styles.myForm}>
            {children}
        </form>
    )
}


export default Form;

// css
.myForm{
    border: 1px solid black;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.myForm > * {
    padding: 10px;
    margin: auto;
}

.myForm input{
    padding: 15px;
    border: 0px;
    border-bottom: 1px solid black;
    margin: 10px;
}

.myForm input[type=submit]{
    background: #eeeeee;
    font-size: 18px;
    border-radius: 5px;
    border: 0px;
    opacity: 0.8;

}

.myForm input[type=submit]:hover{
    opacity: 1;
    cursor: pointer;

}

class Form extends React.Component{
    render(){
        return(
            <Form  onSubmit={this.handleClick}>
                <input 
                    placeholder='username' 
                    name='username' 
                    value={username} 
                    onChange={this.handleChange} />
                <input 
                    placeholder='password' 
                    name='password' 
                    value={password} 
                    onChange={this.handleChange}/>
                <input type='submit' value="SUBMIT"/>
            </Form>
        )
    }
}

구성 요소를 소품으로 전달:

흔하지는 않지만 때로는 구성 요소에 여러 개의 "구멍"이 필요할 수 있습니다. 이러한 경우 어린이를 사용하는 대신 자신의 규칙을 생각해 낼 수 있습니다.

import React from "react";
import styles from "./child.module.css";

const Menu = props => {
  console.log("hello");
  return (
    <div className={styles.cont}>
      <div>{props.left}</div>
      <div>{props.right}</div>
    </div>
  );
};

const Title = ({ label }) => <div>{label}</div>;

const Children2 = props => (
  <div>
    <Menu left={<Title label="LEFT" />} right={<Title label="RIGHT" />} />
  </div>
);
// OR
const Children2 = props => (
  <div>
    <Menu left={"LEFT"} right={"RIGHT"} />
  </div>
);

export default Children2;

// css

.cont {
  display: flex;
  width: 80%;
  border: 1px solid black;
}

.cont > * {
  flex: 1;
  border: 1px solid gray;
}

Codesandbox Example

useReducer:

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

useState의 대안. (state, action) => newState 유형의 리듀서를 수락하고 디스패치 메서드와 쌍을 이루는 현재 상태를 반환합니다.

여러 하위 값이 포함된 복잡한 상태 논리가 있거나 다음 상태가 이전 상태에 종속되는 경우 일반적으로 useReducer가 useState보다 선호됩니다.

useReducer를 사용하면 다음과 같은 이유로 심층 업데이트를 트리거하는 구성 요소의 성능을 최적화할 수 있습니다you can pass dispatch down instead of callbacks..

이 후크는 리듀서 함수와 초기 상태라는 두 가지 인수를 허용합니다.

useReducer(reducer, initialState);

상태의 현재 값과 디스패치 함수로 분해할 수 있는 두 값의 배열을 반환합니다.

인수와 반환 값에 대해 알아봅시다.

state: Hook에 전달된 initialState의 현재 값입니다.

감속기: 감속기는 상태와 동작을 받아들이는 함수입니다. 이러한 인수를 기반으로 상태 값이 어떻게 변경되는지 결정합니다.

디스패치: 디스패치 함수는 리듀서 함수에 액션을 전달하는 방법입니다. 상태를 업데이트하는 데 사용할 작업을 디스패치합니다.

액션은 속성으로 유형과 페이로드를 가진 객체입니다.

반대 예시는 다음과 같습니다.

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

초기 상태 지정

useReducer 상태를 초기화하는 방법에는 두 가지가 있습니다. 사용 사례에 따라 둘 중 하나를 선택할 수 있습니다. 가장 간단한 방법은 초기 상태를 두 번째 인수로 전달하는 것입니다.

const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}  );

Codesandbox Example

Context API & useReducer Codesandbox Example

여기까지입니다 여러분, 다음 기사에서 뵙겠습니다.
내 블로그가 마음에 들면 더 많은 업데이트를 위해 나를 따르십시오. 에서 저를 팔로우하고 에서 저와 연결할 수 있으며 동시에 제Hashnode Blog를 확인할 수 있습니다.

건강을 유지하고, 코딩을 계속하고, 탐색을 계속하고, 자신이 하는 일에 만족하세요.