[⚛️] useState() 를 왜 쓸까?

리액트 기능을 구현하다가 들은 생각

useState의 정확한 기능은 무엇이며, 왜 쓰는 걸까?

리액트에서 useState의 역할

 

📍useState란?

'state'라는 것을 만들어 주는 함수이다.

 

 

📍state란?

변경가능한 데이터를 다루는 변수이다.

state에 할당된 값이 변하면 그와 관련된 컴포넌트(화면을 구성하는 블럭)들이 재렌더링 된다.

 

일반 변수는 값은 바꾸어도 화면을 재렌더링 하는 기능은 없다.

state는 리액트에서 단순한 변수가 아닌 변화하는 값에 따라 화면에 반영되도록 연결되어있다.

 

즉, state를 사용하는 이유는

리액트에서 state가 화면을 재렌더링 하는 역할을 하기 때문이다.

 

 

📍useState 형태 분석

const [ name, setName ] = useState(초기값);

 

위의 형식에서 'name' 부분은 현재 값을 'setName' 부분은 name(현재 값)을 업데이트 하는 함수이다.

setName 함수가 실행되어 그에 따라 변동된 값이 name에 담기게 된다.

 

따라서 console.log(name); 으로 현재 변동되는 값을 실시간으로 확인할 수 있다.