[React] input태그 상태 관리

2022. 9. 19. 12:30·Front-End/React

input 태그 상태 관리하기

inputSample.js 생성

import React from 'react';

function InputSample() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}

export default InputSample;

App.js 에서 렌더링

import React from 'react';
import InputSample from './InputSample';

function App() {
  return (
    <InputSample />
  );
}

export default App;

useState를 활용해서 input 객체 상태 관리

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {  // 이벤트객체 e를 받아온다.
    setText(e.target.value); // e.target은 이벤트가 발생한 DOM객체
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;
  • input의 onChange 이벤트에서 이벤트 객체 e를 파라미터로 받아와서 사용한다.
  • 이 객체의 e.target은 이벤트가 발생한 DOM을 가리키게 되어서 해당 value값을 조회해서 입력값을 조회할 수 있다.

여러개의 input 태그 상태 관리하기

inputSample.js 수정

import React, { useState } from 'react';

function InputSample() {
  const onChange = (e) => {
  };

  const onReset = () => {
  };

  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="닉네임" />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        이름 (닉네임)
      </div>
    </div>
  );
}

export default InputSample;

input이 이름과 닉네임 2개로, 여러개인 경우가 되었습니다.

단순히 useState를 여러개 사용하고, onChange도 여러개 만들어서 구현이 가능하지만, 개수가 많을 경우 효율적이지 못합니다.

input에 name값을 설정하고, 이벤트가 발생했을때, name값을 참조해서 상태를 관리

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤 (전개연산자)
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };

  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;
  • input객체에 name값 설정
  • useState에 설정한 name값을 key로, value로 initial값 설정
  • 리턴받은 useState 객체를 비구조화 할당을 통해 값 추출
  • 이벤트 발생시 리액트 불변성을 지키기 위해서 전개연산자를 통해 객체를 복사한뒤 값을 설정


참고

https://react.vlpt.us/basic/09-multiple-inputs.html

반응형
저작자표시 (새창열림)
'Front-End/React' 카테고리의 다른 글
  • [React] map을 이용한 배열 렌더링하기
  • [React] useRef란? useRef의 사용
  • Props란? Props를 사용하는 방법
  • [React] Redux를 리액트 프로젝트에 사용해보기
LightSource
LightSource
어제보단 발전한 오늘의 나를 위한 블로그
    반응형
  • LightSource
    LightSourceCoder
    LightSource
  • 전체
    오늘
    어제
    • 분류 전체보기 (160)
      • Git (4)
      • Language (6)
        • Java (6)
      • Back-End (70)
        • Spring Boot (4)
        • MyBatis (1)
        • Oracle (1)
        • PL SQL (3)
        • JPA (25)
        • Spring Data JPA (5)
        • Spring MVC (8)
        • Spring (12)
        • Spring Security (2)
        • Redis (1)
        • queryDSL (8)
      • Front-End (38)
        • 아이오닉 (2)
        • JSP (7)
        • JavaScript (4)
        • React (16)
        • TypeScript (3)
        • Angular (6)
      • AWS (1)
      • CI & CD (2)
      • 개발지식 (13)
        • 네트워크 (9)
        • CS 지식 (4)
      • 데이터모델링 (2)
      • Tool (1)
      • 프로젝트 (5)
      • 독후감 (2)
      • 잡생각 (0)
      • 면접 준비 (1)
      • 알고리즘 (14)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    배열요소수정
    배요소열추가
    배열요소삭제
    리액트
    react
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
LightSource
[React] input태그 상태 관리
상단으로

티스토리툴바