231102 / Day 30

useState를 사용하여 배열메서드를 실행하는 이벤트핸들러 만들기

버튼 클릭시 배열 안에 새로운 값을 넣는 이벤트 핸들러 생성

- arr.메서드() 형식으로 직접 수정을 가하지 않고 전개연산자 '...' 사용. 

이유: state의 상태업데이트와 리액트의 불변성 원칙을 지켜주기 위함

 

React의 상태 업데이트

: React컴포넌트에서 상태(state)를 업데이트할 때, 이전 상태를 직접 변경하지 않고 새로운 상태를 생성하여 사용해야 한다.

-count: 초기값, setCount: count에 변화를 주는 함수.

const [count, setCount] = useState(0);

React는 상태가 변경될 때 컴포넌트를 다시 렌더링하여 화면에 변경된 데이터를 반영한다. (React의 성능 최적화와 상태 관리를 위해서라고 한다.)

 

불변성 원칙

: 불변성은 데이터가 변경 불가능해야 함을 의미한다. 배열이나 객체와 같은 데이터 구조를 변경하지 않고 새로운 데이터 구조를 생성하여 데이터를 업데이트해야 한다. 이렇게 함으로써 예기치 않은 부작용을 방지하고 데이터를 추적하기 쉽게 만들 수있다.

 

리액트에서 원시데이터가 아닌 데이터의 불변성을 지켜야하는 이유

: 리액트는 state의 변화에 따라 리랜더링 여부를 결정하며, state의 변화 여부는 메모리 주소의 비교를 통해 확인한다.

만약 원시데이터가 아닌 데이터를 '직접 수정'하면 값은 바뀌지만 메모리주소는 변함이 없으므로 React는 stated의 변화를 인지하지 못한다. 따라서 랜더링이 일어나지 않게 된다. 이런 불변성을 지켜주기 위해  전개연산자를 사용하여 기존 값을 복사하고, 복사한 값에 수정을 가하는 방식으로 구현할 수 있다.