React useState 이해하기

 

Hooks API Reference – React

import React, { useState } from 'react';

리액트의 내장 함수 이기때문에 임포트 해준다.

 

const [state, setState] = useState(0);

자바스크립트 es6 의 신문법인 destructuring방식으로 할당된다.

어려운말이다...  구조 분해 할당을 하는 것이다... 후

 

구조 분해 할당 - JavaScript | MDN

어쨌는 state에 값이 담기는데 state는 객체이다.

 

state의 값을 변경하고 싶으면 setState()함수에 매개변수에 값을 넣어주면된다.

 

근데 const로 선언했는데 어쨰서 state가 바뀌는가!?

 

이거 이해하려고 이글을 쓴다...

 

우선 메모리에 할당 되는 부분을 이해해야한다.

 

기본형으로 선언한 변수들은 메모리 하나에 저장이 된다.

참조형으로 선언된 변수들은 새로운 메모리에 저장이 된다.

 

기본형

let a = 1

let b = 1

a === b  = true

1

참조형

let a = [1]

let b = [1]

a === b = false

1

 

1

이제 setState를 하면 새로운 참조형 state에 값을넣어 렌더링 된다는 것을 이해할수있다.

 

아니 아직도 사실 잘 모르겠다..

이해가 될듯 말듯하다 계속 쓰다보면 이해가 되겠지...