리액트 State Hook

리액트는 라이브러리가 매우매우 유용하다.

2차프로젝트때는 hook을 사용하라고 하기에,
리액트 라이브러리를 토대로 훑어보았다.

구글링에 돌아다니는 예시로

.
.

매서드 내에서 return을 통해 componentWillUnmount도 구현이 가능하다.

클래스 사용할때 constructor안에서 this.state를 {count:0}으로 설정해서 count를 0으로 초기화했었는데, 함수형 컴포넌트에서는 useState 훅을 직접 컴포넌트에 호출한다.

count라고 부르는 state 변수를 선언하고, 0으로 초기화한다는것 꼭 기억해둘 것!
리액트는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공한다.
count변수의 값을 갱신하려면 setCount를 호출하면 된다.

(내 얄팍한 지식으로 아직 위 문장이 제대로 와닿지는 않지만 언젠가.. 하다보면 되겠지)

그리고 state 가져올때,
꼭 {this.state.count}라고 명시하지 않고 {count} 이렇게 가져오면 직접 사용가능하다.(컴포넌트형 함수는 긴데 이건 짧아서 좋다. 쓸때 매우 편리할거같다.)

.
.

useState를 이용해서 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열로 만들어진다.
첫 번째 아이템은 현재 변수를 의미, 두번째 아이템은 해당 변수를 갱신해주는 함수.