반응형
메소드에 있는 this.setState에 대해서 알아보자!
state에 있는 값을 바꾸기 위해서는 this.setState를 무조건 거쳐야 해!
리액트에서 이 함수가 호출되면 컴포넌트가 리랜더링 되도록 설계되어 있거든!
이 함수에 대해 더 자세히 보자고!
setState는 객체로 전달되는 값만 업데이트 해 줘!
예제로 보자!
지금은 state에 number 값 밖에 없지만 다른 값이 있다고 가정해보자고!
여기서 this.setState({ number: 1 });을 하게 되면, foo는 그대로 남고, number 값만 업데이트 된다는거야!
setState는 객체의 깊숙한 곳까지 확인하지 못해!
예를 들어서, state가 이렇게 설정됐다고 한다면
이렇게 한다고 해서 foobar 값이 업데이트 되지 않아!
이렇게 한다면 그냥 기존의 foo 객체가 바뀌어버려!
그래서 위와 같은 상황에서는 이렇게 해줘야 해!
...은 자바스크립트의 전개연산자야!(나도 처음 봤어.. 찾아보자ㅠㅠ)
기존의 객체안에 있는 내용을 해당 위치에다가 풀어준다는 의미!
그 다음에 설정하고 싶은 값을 또 넣어주면 해당 값을 덮어 쓰게 돼!
이러한 작업이 엄청 귀찮잔아?
그래서 나중에는 immutable.js나 immer.js를 사용해서 간단하게 해보자고!
반응형
'Dev > React' 카테고리의 다른 글
| React : 이벤트 설정! (2) | 2020.11.25 |
|---|---|
| React : setState에 객체 대신 함수 전달하기! (0) | 2020.11.25 |
| React : 메소드 작성 + 화살표함수 (0) | 2020.11.25 |
| React : state를 통해 동적인 데이터를 다뤄보자!! (0) | 2020.11.25 |
| React : 함수형 컴포넌트 + defaultProps (0) | 2020.11.25 |
