React 두통 #5

#5 머리에서 쥐가 난다! ㅠㅠ

input 상태 관리하기

리액트에서 사용자가 입력할 수 있는 input 태그의 상태 관리법에 대해 알아보겠다.

src 폴더에 InputSample.js라는 파일을 생성한다.

InputSample.js

import React from 'react';

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

export default InputSample;

위의 컴포넌트를 App파일에 렌더링한다.

App.js

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

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

export default App;

결과는...

input에 입력하는 값이 밑에 나타나게 했고, 초기화 버튼을 누르면 하단의 값이 비워지도록 구현해봤다.

InputSample.js

import React, { useState } from 'react';

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

  const onChange = (e) => {
    setText(e.target.value);
  };

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

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

export default InputSample;

위의 코드에서 useState를 사용했으며 input태그에 onChange라는 이벤트를 사용한다.

함수를 만들어서 파라미터로 e (event)를 만들어서 event.target.value 즉 input에 입력하는 값이 무엇인지 알 수 있다.

그리고 또 다른 함수를 만들어서, setter 함수를 빈 문자열로 만들었다.

그리고 해당 함수를 버튼의 onClick 이벤트에 직접 연결시킨다.

결과값 :

초기화 전...

초기화 후...

그리고 input 태그에 value로 text를 넣어서 바뀌는 상태값으로 만들었다.

여러개의 input 상태 관리하기

InputSample의 코드를 밑에처럼 수정한다.

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의 개수가 증가했을 경우, 단순히 useState와 onChange를 여러개 만들어서 구현 할 수 있다. 하지만 그 방법은 좋은 방법이 아니다.

더 좋은 방법은, input에 name을 설정하고 이벤트가 발생할 때 해당 값을 참조하는 것이다. 그리고 useState는 객체 형태로 상태 관리해준다.

화면구현...

InputSample 컴포넌트를 다음과 같이 수정해본다.

InputSample.js

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;

리액트에서 객체를 수정해야 할 때...

inputs[name] = value;

위에처럼 수정을하면 안된다.

새로운 객체를 만들어서 새로운 객체에 변화를 주고 상태로 사용해야한다.

setInputs({
  ...inputs,
  [name]: value
});

... 이 문법은 spread 문법으로 객체의 내용을 모두 펼쳐서 기존 객체를 복사하는 기능을 갖고있다.

리액트에서 객체를 업데이트하게 될 때 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서 새 객체에 변화를 주어야 한다!

참고 : 벨로퍼트와 함께하는 모던 리액트

느낀점 :

• 하나의 input과 여러개의 input의 리액트 활용법에 대해 배우면서 아직까지 잘 이해가안되는 부분이 존재한다고 생각이든다.
• 다시 한 번 공부해야겠다.