220907 TIL useState의 편리함

이전에 react를 처음 배울 때 useState, useEffect 등등 여러 가지 개념이 많이 나왔었는데 사용법도 제대로 못 익히고 아샬님이 하는 대로 무지성으로 외우고만 넘어갔었는데 이번에 어떻게 작동하는지 왜 사용하는지 알기 위해 여러가지 실험을 해봤다.

 

우선 오늘은 useState에 대해서 공부를 했는데 useState를 왜 쓰는지 알기 위해서 useState를 사용해서 만든 것을 useState를 안 사용하고 만들어 보기로 했다.

 

너무 복잡한 건 힘드니까 아주 간단한 기능인 버튼을 눌렀을 때 버튼을 누른 횟수만큼 count가 증가하는 것을 만들어봤다.

즉, useState를 사용하지 않고 상태 값이 변화하는 것을 화면에 바로 보는 것을 목표로 했다.

 

어떻게 하면 setState 같은 값을 주지 않고 이벤트가 발생했을 때마다 값이 변하게 할 수 있을까 고민을 하다 swing때 했던 것처럼 버튼을 눌렀을 때(버튼을 누른 이벤트) 화면이 다시 갱신이 되게 하면 바로바로 변화가 될 것이라고 생각했다.

 

하지만 이번에는 swing이 아닌 얼마 전까지만 해도 어려워했던(사실 아직도 많이 어려운..) react로 이 작업을 했다.

useState를 쓰면 상당히 빨리 만들 수 있는 과정이지만 useState의 필요성을 느끼기 위해 없이 도전!!

 

react에서 버튼을 누른 즉시 버튼 누른 횟수가 증가된 것을 볼 수 있게 하기 위해 render를 이용해서 다시 화면을 그려주는 방식을 생각했다.

 

전체 코드부터 보자.

원래라면 App이라는 컴포넌트를 한 번만 render 하겠지만 한 번만 render를 하게 되면 count의 초기값인 0을 render 하기 때문에 버튼을 아무리 눌러도 화면은 0에서 바뀌지 않는 걸 확인했다.

 

그러면 여기서 버튼의 속성에 onClick으로 count의 숫자를 증가하는 함수를 줬는데 버튼을 클릭했을 때 count의 숫자가 올라가고 있는 건지 궁금해서 console로 찍어서 확인해본 결과 누른 만큼 숫자는 올라가는 걸 볼 수 있었다.

 

이제 이 증가된 숫자를 화면에 바로 갱신이 되게 하기 위해 버튼을 눌렀을 때마다 render를 새로 그려주는 방법을 사용했다.

 

버튼이 눌렸을 때 호출되는 메서드인 handleClick함수에 reRender()라는 메서드를 만들어서 넣어줬다.

reRender메서드는 메서드명 그대로 App컴포넌트를 다시 render 해주는 메서드이다.

function reRender() {
  root.render(<App />);
}

 

강의에서는 App 컴포넌트를 한 번만 render 하고, 버튼을 눌렀을 때 변하는 값은 useState를 통해 설정된 값만 변하게 하는 반면 내가 작성한 코드는 버튼을 클릭할 때마다 App 컴포넌트 전체를 리렌더링 하는 과정이다.

 

그리고 이 과정의 단점은 만일 값이 변하는 지점이 여러 개 있을 경우 각각의 부분마다 reRender 메서드를 꼭 써줘야 한다.

즉, 중복이 발생한다.

 

그러면 useState를 써서 위와 똑같은 결과가 나오는 코드를 작성해보자.

 

reRender이라는 메서드가 사라짐으로써 지저분했던 코드가 깔끔해진 걸 볼 수 있다. (착각인가?)

 

useState가 어떻게 동작하는지 알아보기 위해 useState의 값을 콘솔로 한번 찍어봤다.

const count = useState();

console.log(count);

콘솔로 찍어보니 배열이 나왔는데 여기서 눈에 띄었던 건 배열 안의 f 였다

배열의 두 번째 값이 함수였던 것이었다....!! 나만 몰랐던 사실..

지금까지 몰랐었는데 useState 만들 때 항상 만들던 const [count, setCount] = useState(); 이 형태의 setCount가 함수였던 것이었다. 두 번째 setCount자리는 값을 변화시켜주는 거라고만 생각하고 사용했었는데 값을 변화시켜 줄 수 있었던 이유가 함수였기 때문이었다.

 

지금 다시 생각해보니까 setCount를 사용할 때 ()가 붙어서 () 안에 들어오는 것을 실행해주는 형태라 함수인 건 당연했는데 무지성으로 사용법만 외우니까 함수인걸 인지하지 못했다...

 

counter.count += 1;
root.render(<App />);

위의 두 코드를 setCount(count + 1) 함수 혼자 값도 변화시키고 리렌더링까지 하고 있었던 것 같다.

 

useState를 사용하지 않았을 때는 reRender라는 메서드를 만들고 내가 직접 리렌더링을 했는데 그런 과정 필요 없이 useState는 간단하게 값도 바꿔주고 리렌더링도 해주는 편리한 친구란 걸 알게 됐다.

 

시간이 평소보다 많으니까 무지성으로 외우고만 넘어갔던 부분들을 여러 가지 만들어보면서 공부하니까 재밌기도 하고 뭔가 제대로 알아가는 기분이라 매우 재밌었다.