📚 Reference

• 참고 자료 1

Immutability

• Immutability
• 리액트 컴포넌트의 state 를 변경해야 할 땐, 무조건, setState 를 통해서 업데이트 해주어야 하며, 업데이트 하는 과정에서 기존의 객체의 값을 직접적으로 수정하면 절대 안된다**.**

예시

state = {
  users: [
    {
      id: 1,
      username: 'velopert'
    }
  ]
};

• 새로운 객체 추가

// bad code
this.state.users.push({ 
  id: 2, 
  username: 'mjkim' 
});

// bad code
this.state.users[0].username = 'new_velopert';

// bad code
this.state.users.push({ 
  id: 2, 
  username: 'mjkim' 
});

this.setState({
  users: this.state.users
});

// bad code
this.setState(({users}) => {
  users.push({ 
    id: 2, 
    username: 'mjkim' 
  });
  return { 
    users
  };
});

• 우선, setState 를 통하여 state 를 변경하지 않으면 리렌더링이 되지 않는다.
• setState 를 통해서 하니까 컴포넌트가 리렌더링은 되지만 나중에 컴포넌트 최적화를 못하게 된다.