React - 리액트의 상태와 불변성

리액트의 상태(state)는 읽기전용 이다.

👉 불변성 을 유지해야한다.

만약 상태를 변경해야한다면?

👉 새로운 참조값을 만들어줘야한다. (상태의 내부 값을 직접적으로 수정 ❌)
👉 '새로운 값 or 새로운 객체 or 새로운 배열' 만들기

• 리액트는 새로운 참조값이 만들어져야 상태가 변경되었다고 인지해서 update 한다.
  참조값이 동일한(기존) 객체에서 변경을하면 기존 객체는 update되지 않는다.

불변성이란?

값이나 상태를 변경할 수 없는 것을 의미한다.

💡 예제

let fruit = '사과'
fruit = '딸기'

변수 fruit은 '사과'에서 '딸기'로 값이 변경되었다.
fruit이 참조하고 있는 메모리 영역의 값이 '사과'에서 '딸기'로 변경되었다고 생각할 수 있지만, 실제로는 메모리에 '사과'와 '딸기' 모두 존재한다.

값이 대체되는 것이 아닌, 새로운 메모리 영역에 '딸기'가 할당이되고 fruit이 참조하는 메모리의 영역이 바뀌는 것이다.

리액트의 불변성

React는 상태(state)가 업데이트되면 렌더링이 일어나기 때문에 이 개념이 매우 중요해진다.

리액트는 상태값을 업데이트할 때 참조값만 비교하여 상태 변화를 감지한다.

따라서 객체나 배열의 값을 직접 변경하게 된다면 리액트는 인지하지 못하여 UI에도 아무런 변화가 없게된다. 따라서 불변성을 지키는 업데이트가 필요하다 !
👉 새로운 객체나 배열을 생성해서 새로운 참조값을 만들도록 하여 업데이트하기

이렇게 불변성을 지켜 업데이트를 하게 되면
원본 데이터를 직접수정하지 않고, 복사본을 만들어서 값을 사용하기때문에 사이드이펙트도 방지 할 수 있다.

객체/배열 새로운 참조값 생성하기!

새로운 객체와 배열을 만들어주기위해 자주 쓰이는 메소드

• spread 연산자
• map
• filter
• slice
• reduce
• etc...

// person obj
const Person = {
  name: '수진',
  title: '개발자',
  mentors: [
    {
      name: '철수',
      title: '시니어개발자',
    },
    {
      name: '영희',
      title: '주니어개발자',
    },
  ],
};


// person 객체를 복사, 값 변경을 해주기 위해 스프레드 연산자와 map을 사용하여 새로운 참조값을 생성
{
   ...person,
   mentors: person.mentors.map((mentor) =>
     mentor.name === prev ? { ...mentor, name: current } : mentor ),
 };