[React] useState 설명 2

const [number, setNumber] = useState(0);

위와 같은 코드가 있다고 했을 때, [number, setNumber] 는 배열이다.
useState(0)은 number에 0을 할당하는 배열 비구조화 할당 문법이다.

1번째 원소 number는 현재 상태 값 변수이고,
2번째 원소 setNumber는 상태 값을 갱신해주는 Setter 함수이다.
useState 괄호 안의 값은 상태의 초기 값이다.

 

 

다음 코드는 배열 비구조화 할당을 이해하도록 아래 코드를 먼저 보고 배열 비구조화 할당을 이해하도록 하자.

const array = ['dog', 'cat', 'sheep']; 
const [first, second] = array; 
console.log(first, second); // dog cat

 

useState(0)으로 돌아와서 설명을 이어가자. 
number에 0으로 현재 값을 설정하고, setNumber <-- setter이다. 결과적으로 hook은 클래스로 구성한 구조 (변수, setter, props로 클래스로 인스턴스 후 생선된 객체 내의 변수 값 제어) 등을 모두 useState라는 함수 하나로 퉁치고 있는 것이다.

알고나면 정말 페북이 엄청난 일을 했다는 것을 다시금 깨닫게 된다.ㅎㄷㄷ

 

출처
react.vlpt.us/basic/07-useState.htmlxiubindev.tistory.com/97

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook