[react]useState hook

hook은 react 컴포넌트 중 함수 컴포넌트에 기존에 클래스 컴포넌트에만 있었던 state (상태)와 lifecycle의 개념을 쓸 수 있게 만든 기능이다. 해당 기능의 추가로 클래스 컴포넌트는 점점 안쓰게 됐다는 얘기를 들은 것 같다.

이러한 hook 중 컴포넌트의 상태를 저장하고 수정 할 수 있는 useState에 대해 얘기해보자.

저장하고 싶은 상태를
1. 선언하고
2. 수정한다

1. 선언방법으로는

   const [state, setState] = useState();

여기서 state 변수명은 원하는 대로, 다면 setState쪽은 set는 꼭 써야하며 그 다음 내용은 관습적으로 선택한 변수명으로 쓴다.
useState hook을 쓸 때는 react에서 해당 기능을 import 해와야한다. import {useState} from 'react';
useState() 괄호 안에는 비워둬도 되고 아니면 초기값 또는 데이터 타입 등을 넣어 놓을 수 있다.

2. 수정 방법은 일반적으로 이벤트를 트리거로 이용하여 함수를 불러오는 방식으로 해당 함수 내에 다음과 같이 넣으면 된다.

   setState(수정값);

해당 수정값 부분은 데이터 타입에 따라 좀 넣는 방식이 다르니 참고하자.

이렇게 수정값을 state 변수안에 넣으면 해당 변수를 이용하여 컴포넌트 어디에서든 쓸 수 있다.

react는 state가 바뀌거나, 부모의 state가 바뀔 때 그 아래 자식 컴포넌트들 ui의 해당 부분을 rerendering 시켜준다.