[React] #3.1 All you need to know about State (#코딩공부)

https://youtu.be/38I5K3p42WU

---

<복습>

https://wook-2124.tistory.com/132

[React] #3.0 Class Components and State (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

---

1. setState()

state의 count를 직접(directly) 변경하려고 하자, Do not mutate state directly라고 뜨고 setState()를 사용하라고 나왔다.

 

state는 object(객체)이기 때문에 setState는 새로운 state를 { }로써 받아야한다. 때문에 setState를 호출하면 React는 state를 refresh하고 render function으로 return값을 자동으로 반환하는 것이다.

 

즉, setState로 새로운 state를 줌으로써 자동으로 return값을 변화시키는 것이다.

 

setState를 호출하면 React는 변화가 있는 부분만 업데이트를 한다. 즉, React는 render의 return값을 다시 refresh한 후 반환하는 것이다. 그러나 setState를 사용하지 않으면 새로운 state와 render function이 함께 호출되지 않는다.

---

2. this.state.count | class.state.count

this.state.count는 class.state.count와 동일한 개념이다. 때문에 this.setState({ count: this.state.count +- 1 })로 0의 count에 + 1을 해주는 add function과, 0의 count에서 - 1을 하는 minus function이 완성됐다.

 

처음 class.state.count의 0의 상태(state)에서 this.state.count로 다시 +1을 해주면 1, 다음으로 1의 상태(state)에서 +1을 해주면 2로 작용하는 모습이고 반대도 똑같다.

 

하지만 이런식으로 this.state.count 즉, class.state.count인 외부의 state(상태)에 의존하는 것은 미관상으로나 기능상으로 좋지 않다.

---

3. current function | current =>

때문에 현재의 state(상태)를 나타낼 수 있는 current function을 통해서 current.count로 state를 set할 수 있다. 이것은 class.state.count, 즉 외부의 state(상태)에 의존하지 않는 가장 좋은 방법이다. 말 그대로 current(현재)의 state(상태)를 가지고서만 setState를 호출해서 state(상태)를 바꿀 수 있다.

 

정해진 state, 즉 처음 설정한 class.state.count(외부의 state)에 의존하지 않고, current(현재) state(상태)만 신경써도 똑같이 작동한다.

 

이렇게 정해진 setState를 onClick으로 add, minus function을 각각 호출할 때마다, React는 새로운 state를 갖고서 render function을 업데이트하고 return한다. this.state.count = 1, -1처럼 설정하는 것은 아무런 영향을 안주고, setState로 설정했을 때만 영향을 준다.