Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

사과하는 제라스

useReducer를 사용해보자! 본문

제라스가 React를 다루는 방법

useReducer를 사용해보자!

Xerath(제라스) 2023. 1. 8. 00:46

목차

    728x90
    반응형

    React Hook에서 useReducer를 사용하면 여러개의 input이 존재하더라도 간편하게 관리할 수가 있다!!

     

    1) 커스텀 Hook을 사용하지 않은 Ver.

    //Info.js - NonCustomed Ver.

import React, { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}
const Info = () => {
  // const [name, setName] = useState("");
  // const [nickname, setNickname] = useState("");
  const [state, dispatch] = useReducer(reducer, { name: "", nickname: "" });
  const { name, nickname } = state;

  const onChange = (e) => {
    dispatch(e.target);
  };
  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름: {name}</b>
        </div>
        <div>
          <b>닉네임: {nickname}</b>
        </div>
      </div>
    </div>
  );
};

export default Info;

    2) 커스텀 Hook을 사용한 Ver.

    //useInputs.js

import { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}

export default function useInputs(initialForm) {
  const [state, dispatch] = useReducer(reducer, initialForm);

  const onChange = (e) => {
    dispatch(e.target);
  };
  return [state, onChange];
}
    //Info.js - Customed Ver.

import useInputs from "./useInputs";

const Info = () => {
  // const [name, setName] = useState("");
  // const [nickname, setNickname] = useState("");
  const [state, onChange] = useInputs({ name: "", nickname: "" });
  const { name, nickname } = state;

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름: {name}</b>
        </div>
        <div>
          <b>닉네임: {nickname}</b>
        </div>
      </div>
    </div>
  );
};

export default Info;

    [출처] 리액트를 다루는 기술

    728x90
    반응형

    '제라스가 React를 다루는 방법' 카테고리의 다른 글

    .prittierrc에는 무엇을 쓸까?  (0) 2023.01.12
    리액트에서 성능 향상하기 - 리렌더링 줄이기!  (0) 2023.01.08
    React 개발 시 단축키로 구조를 만들어보자  (0) 2022.12.22
    Real DOM으로 다루면 느리다구요? Virtual DOM이 뭔데요??  (0) 2022.12.22
    '제라스가 React를 다루는 방법' Related Articles more