*** 노마드코더에서 무료로 강의해주는 ReactJS 강의를 보고 개인적으로 정리한 내용입니다. ***
State는 객체이다. Component의 data를 넣을 공간이 있고, 이 data는 동적이다.
React의 state를 사용하기 위해서는 class component를 사용한다.
앞서 다루었던
props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다.
props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.
위와 같이 React.Component를 상속받는 class인 App을 생성한다.
내부에 state를 선언하고 state는 count라는 data를 가지고 있다.
Render()함수를 실행하고, count를 출력하기 위해서는
class이므로, this.state.count로 작성해준다.
요로코롬 나온다.
우리가 관심가질 부분은 당연히
저 data(예시에서는 count)를 어떻게 변경할 것인가 이다.
(참고로 react의 button에는 onClick이 기본적으로 탑재되어있다.
javascript에서는 addEventListener()를 사용해야 했다. React가 더 편리한 부분이라고 할 수 있겠다.)
숫자를 add해주는 button과 minus해주는 button을 이용해서
누를 때마다, 다시 말해 onClick이 발생할 때마다 add, minus해주는 함수를 달아주면 되지 않을까?
이런 식으로 말이다!
하지만 애석하게도…(어쩌면 당연하게도…) 버튼을 눌러도 아무런 변화가 없다.
그리고 console창을 확인해보면
대충 이런 경고창이 나온다.
해석하자면, state를 직접적으로 수정하지 말고, setState()를 사용하라는 경고이다.
다시 우리가 썼던 코드를 보자.
이런 식으로 함수를 쓰면,
우리가 버튼을 누를 때마다 render를 다시 실행해서 refresh를 해줘야 값이 update된다.
State를 직접적으로 변경하는 방식으로는 react가 우리의 의도를 바로 알 수 없기 때문에 위와 같은 경고가 나온다.
refresh를 하지 않기 때문에(render()를 다시 호출하지 않기 때문에) 값이 변경되지 않는 것이다.
하지만 setState()를 사용하면, react가 우리의 의도를 파악해서 state를 알아서 refresh해준다.
(그 과정에서 render를 다시 호출하는 것)
따라서, add()와 minus()를 다음과 같이 작성해야 한다.
-> setState()를 사용하고, {}를 이용해 jsx의 prop을 표현해주고, component의 형태는 class이기 때문에 this를 사용한 방식이다! 정말 객체지향적이다.
그런데 사실 위와 같은 방식이 neat한 방식은 아니다…
외부의 영향을 최대한 받지 않고 “현재 값”에 기반하여 data를 변경하고 싶을 때는,
react에서 제공하는 current를 이용하면 좋다.
위와 같은 방식이 가장 트렌디하다고 한다.
