[HTML/CSS/JS] React를 통해 useState()를 사용해 보자 : 상태를 업데이트 해보자

 

 

usdState() 함수는 리액트에서 컴포넌트 요소들의 값을 간편하게 생성하거나 업데이트하는 도구를 제공한다. 아래의 예시를 보자.

 

state라는 변수에 초기값을 0으로 설정

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

 

setState()를 통해 state의 값을 변경할 수 있다. 

ex) setState(state + 1);

 

 

실제 예시를 적용해 보자

See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen.

 

useState() 함수를 왜 사용하는 걸까?

그저 변수를 선언하고 변경할 뿐이라면 useState()를 사용할 필요가 있는지 의문이 들 수 있다. 하지만, 많이 사용하는 기존의 방식대로 let이나 var를 통해 변수를 선언하고  값을 변경하기만 해서는 우리에게 보이는 화면에서의 변화는 일어나지 않는다.
즉, 코드 내부에서 let이나 var를 통해 선언된 변수를 업데이트를 하는것 자체를 가능하지만, 그것이 우리에게 보이는 화면에는 즉각적으로 반영되지 않는다. 이에 useState()를 통해 선언된 상태 변수가, 변수의 업데이트 과정에서 화면을 자동으로 재구성해 준다. 이를 리렌더링이라 부른다.

엄밀하게 말한다면, state 변수를 담당하는 컴포넌트만 업데이트되는 것이 아닌, 해당 state를 포함한 함수 전체가 다시 작동하는 방식으로 화면을 새롭게 작성한다. 이에 가상화의 방식과 같이 화면을 빠르게 처리하여 우리의 눈에는 일부 컴포넌트 요소만이 업데이트되는 것처럼 보이게 된다. 다음 포스팅에서는 useState() 함수를 통해 간단한 프로그램을 작성해 보도록 하고 이번 포스팅은 여기서 마친다.