React) 객체 형태로 여러개의 state 관리하기 <TIL_2022_07_25>

프로필 정보 수정 - 객체 형태로 여러개의 state 관리하기

이렇게 총 네가지 항목의 값을 수정하는 기능을 구현해야 하는 경우, onChangeNickname, onChangeJob, … 이렇게 onChange와 useState를 변수마다 각각 지정하여 사용하는 방법도 있지만 최선은 아니다.

(코드도 더 길어지고, 메모리 측면에서도 비효율적인 것 같다. 자세한 원리까지는 아직 잘 모르겠다)

 

가장 좋은 방법은 각 <input> 태그에 name 속성을 지정하여 이벤트가 발생했을때 그 값을 참조하는 것.

 

useState로 문자열이나 배열 뿐만 아니라 객체 형태도 관리할 수 있다.

// user는 DB에서 받아온 유저 정보 객체

const [userInputs, setUserInputs] = useState({
    nickname: user.nickname,
    job: user.job,
    company: user.company,
    desc: user.desc,
  });

// 구조분해할당. const nickname = userInputs.nickname, ... 와 같은 기능을 한다.
const { nickname, job, company, desc } = userInputs;

const onChangeInputs = (e) => {
    const { name, value } = e.target;
// 불변성을 지켜야 함
    setUserInputs({
      ...userInputs,
      [name]: value,
    });
  };

객체의 상태를 업데이트 해줄 때에는

기존의 객체 상태를 복사해놓은 다음,

복사한 값에서 특정 값을 덮어씌운 후 그 값을 업데이트할 객체의 새로운 상태로 설정해줘야 함!

 

이러한 과정을 ‘불변성을 지킨다'고 표현함.

 

jsx 코드는 다음과 같다.

...

<ModalContent onSubmit={onSubmit}>
  <ModalElement>
    <label htmlFor="nickname">닉네임</label>
    <input
      type="text"
      name="nickname"
      defaultValue={user.nickname}
      placeholder={user.nickname}
      onChange={onChangeInputs}
    />
  </ModalElement>
  <ModalElement>
    <label htmlFor="job">직업</label>
    <input
      type="text"
      name="job"
      defaultValue={user.job}
      placeholder={user.job}
      onChange={onChangeInputs}
    />
  </ModalElement>
  <ModalElement>
    <label htmlFor="company">직장</label>
    <input
      type="text"
      name="company"
      defaultValue={user.company}
      placeholder={user.company}
      onChange={onChangeInputs}
    />
  </ModalElement>
  <ModalElement>
    <label htmlFor="desc">자기소개</label>
    <input
      type="text"
      name="desc"
      defaultValue={user.desc}
      placeholder={user.desc}
      onChange={onChangeInputs}
    />
  </ModalElement>
  <button>변경완료</button>
</ModalContent>

...