09.30.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-9 챕터리뷰

[ 새롭게 알게된 것 ]

---

1. 입력을 여러개이고 출력은 하나일땐 state 자료구조를 객체로 관리하는게 편함

---

usestate를 여러개 만들고 onChange도 여러개 만들 수 있겠지만 이건 상당히 비효율적임. 

아래와 같이 input에 name을  설정하고 이벤트가 발생했을때 name과 nickname을 변경하면 편함.

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

 

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

---

 

2.  ...은 spread라는 문법임

---

이건 얕은복사(주소값만 복사하는경우)에 발생할 문제를 해결해줌

새로운 주소값을 할당하고 해당 객체의 값을 할당해주고 싶은경우 이미 많이 사용하고 있었지만

정식 용칭을 이번에 알게됨.

---

 

3. 리액트 불변성은 컴포넌트 성능 최적화를 위한것.

---

책 뒤에서 다시 자세히 짚어본다고 하는데, 원본객체를 직접 수정하면 ( ex. input[name] = value)  리엑트 컴포넌트에서 상태가 업데이트 됨을 감지하지 못함. 리엑트는 객체주소만 참고하기 때문에 깊은 복사로 새로운 주소를 할당해주고 상태를 수정해주어야 DOM이 리렌더링 됨.

 

 

 

---