React - 상태 감지(useState), 컴포넌트

 플러터에서 상태를 바꾸려면 setState를 하여 페이지를 다시 불러오는 작업을 하는 것이 일반적이다. 그러나 남은 타임세일 시간이라거나 카운트다운 같은 것은 setState로 표현 할 수 없다.

리엑트에서는 어떻게 할까?

다음과 같은 아주 간단한 버튼과 기능을 만들었다. 여기서 더하기 버튼을 누르면 a값이 변화한다. 확인해보면

콘솔에서 보면 확실히 a값은 바뀌고 있지만 렌더링은 되지 않는다. 여기서 실시간으로 바꾸고 싶으면 useState로 값을 관리해야한다.

이렇게 관리하면 리엑트는 a의 값을 실시간으로 감지하고 변화하면 화면에 다시 그려주는 편리한 기능을 제공한다.

상태가 바뀌면 모두 다시 그리게 되는데 이것은 매우 비효율적이다. 이 비효율을 해결하기 위한 방법이 부모자식간의 관계를 따지는 것이다. 이를 컴포넌트라한다.

 

이런식으로 코드를 짠다면 더하기 버튼을 수정했을 때 나무는 반드시 다시 그려진다. 이는 프로그램이 커지면 많이 비효율적이될 수 있다.

 

 이렇게 컴포넌트를 나누어서 Wood 라는 함수를 만들어두면 버튼이 수정되었을 때 다시 그릴지 말지를 결정할 수 있다.

그리고 리액트는 한 번 짠 코드는 실행되고 다시 실행되지 않는다. 다시 렌더링하여 그렸을 경우는 setState와 마찬가지로 생성자가 실행되어 처음 a = 5 라고 해놓았다면 그 값은 불변이다.

이를 타개하기 위해 useState를 사용하는 것이고 계속 값을 바꾸기 위해서 concat이 필요하다.

이러한 코드가 있다. 위 코드는 처음 샘플에는 리엑트 스프링부트 플러터가 들어가있다. 그리고 setState로 users를 관리중이며 다운로드 버튼을 누르면 샘플에 push연산이 들어간다. 그렇다면 화면은 바뀔까?

아무리 다운로드해도 화면은 바뀌지 않는다. 콘솔에서는 바뀌고 있는데! 이유는 바로 레퍼런스에 있다. 푸쉬는 얕은 복사로 call of value 이기 때문에 본래의 값이 바뀌지 않는다. 레퍼런스는 그대로라는 것이다. 레퍼런스까지 바꾸려면 concat이 필요하다.

 

정상적으로 바뀌며 값이 변하지 않으면 푸쉬도 되지 않는 모습을 볼 수 있다.