[React] 6. 이벤트 객체를 통한 상태 관리 & 복수의 상태 관리

백괴·2021년 8월 24일
0

리액괴

목록 보기
4/14
post-thumbnail

잘못 된 내용에 대한 지적은 언제든 환영입니다.

이벤트 객체

// input 값 변경 시, 변경 값을 콘솔에 출력하는 예제
const onChange = (e) => {
  console.log("변경 된 입력값 = " + e.target.value);
}

return <input onChange={onChange} />;
  • 이벤트 핸들러를 통해 실행되는 함수는 이벤트 객체 e를 파라미터로 넘겨받을 수 있다.
    (꼭 파라미터명이 e일 필요는 없다.)
  • e.target : 이벤트가 발생 한 DOM을 가리킨다.

'이벤트 객체를 통한 input 상태 관리' 예제

  • input에 입력할 때 마다 text 상태가 변경된다.
  • text 상태는 input 값으로 지정된다. 따라서 초기화 버튼을 눌러 text 상태 값을 빈 값으로 변경하면 input 값 또한 비게 된다.`
import { useState } from "react";

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

  // e.target = 이벤트가 발생한 input 태그
  const onChange = (e) => setText(e.target.value);

  const reset = () => setText("");

  return (
    <div>
      <input onChange={onChange} value={text} />
      <button onClick={reset}>초기화</button>
      <div>
        <b>: {text}</b>
      </div>
    </div>
  );
}
export default InputSample();

여러개의 상태 관리하기

상태를 객체 리터럴로 지정하여 복수의 state값을 동적으로 관리할 수 있다.

const [state, setState] = useState({
  name: "백괴",
  address: "성남시 분당구 서현동"
});

spread 연산자를 통한 복수 상태 불변성 지키기

  • 이전 챕터에서도 알아보았듯이, state 값은 메모리 주소로 값 변경을 판단하기 때문에 불변성을 지켜주어야 한다.

  • 여러 값이 들어있는 객체 리터럴이 state값일 경우, 각 값을 수정하기 위해서는 변경 사항과 나머지 값들이 포함 된 새로운 객체 리터럴로 업데이트 해주어야 한다.

  • spread 연산자 활용하기

    Q. spread가 뭔가요?
    A. 배열/객체 요소의 원시값들을 다른 배열/객체로 복붙해주는 연산자이다.
    ⚠ 주의 : 같은 3점 연산자인 rest와 햇갈릴 수 있으나, 역할은 전혀 다르다.

    const arr = [1, 2, 3, 4];
    const arr_plus = [...arr, 5, 6];
    console.log(arr_plus); // [1, 2, 3, 4, 5, 6]

    spread를 통해 기존 객체의 값을 복붙하고 변경 사항을 추가함으로서 불변성을 지킨 상태 업데이트가 가능하다.

   const [state, setState] = useState({
     name: "백괴",
     address: "성남시 분당구 서현동"
   });

   setState({
     ...state,
     name: "흑괴",
   });

   // { name: "흑괴", address: "성남시 분당구 서현동" }
   console.log(state)

References
"8. input 상태 관리하기" .velopert
"9. 여러개의 input 상태 관리하기" .velopert

0개의 댓글