Modern React 4

input 상태 관리

:: 이벤트에 등록하는 함수는 이벤트 객체 e 를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르킴. 그래서 e.target.value를 조회하면 그 값을 알게 됨.

• input 에 입력하는 값이 나타나게 하고, 초기화 버튼을 누르면 input 이 값이 비워지게하기!

<InputSample.js>
import React, { useState } from 'react';

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

  const onChange = (e) => {
    setText(e.target.value);
  };
// input의 {text} value가 변할때마다 감지
  const onReset = () => {
    setText('');
  };
// 버튼 눌렀을 때 {text}를 빈칸으로 setstate한다고 보면 됨.
  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

<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 [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 로 설정
      //예전에 [e.target.name]: e.target.value  이렇게 했었음
    });
    console.log("value", value)
    //name & nickname둘다 입력하면 콘솔에 둘다 입력값이 찍힘
  };
  
//리액트 상태에서 객체를 수정해야 할 때 inputs[name] = value; 이런식으로 직접 수정하면 x
//새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이거를 상태로 사용해야함

    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;

1. 여러 input일 때 일일히 이벤트거는 것도 방법이지만 input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이 더 좋다.
2. ... 문법은 spread 문법. 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사
   이런 걸 "불변성을 지킨다" 라고 함. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행. 만약 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 x!