Dev-Tino 7주차(3):: react state란? 사용법과 사용 이유!

라디오 버튼 그룹을 통해 어떤 버튼을 누르느냐에 따라 서버에 다른 정보를 부여하고 싶다고 하자. 그런 경우 나는 변수를 사용할 것이다. 어떤 버튼이 눌렸는지, 혹은 페이지가 변경되었는지를 확인하고 그 변수값을 직접 변경시키는 식으로 위 알고리즘을 구현할 것이다.

그러나 리액트에서는 이런 식으로 알고리즘을 짜면 안된다.

1. 리액트는 일반 변수는 바뀌더라도 자동으로 화면을 재렌더링하지 않으며
2. state로 선언해두고서 직접, 마음대로 수정하게 되면 Component의 렌더링과 관련되어 있는 리액트의 state, 그리고 프로그램이 개발자가 의도한 대로 작동하지 않을 가능성이 있기 때문이다.

만약 당신이 특정 변수의 값이 변할 때 화면에 반영되도록 하고 싶다면, 그 값-변수를 state로 선언해야한다.

State, 스테이트와 프롭스(props)::

State는 일종의 자바스크립트의 일반 객체이다. props와 같이 렌더링 결과물에 영향을 주는 정보를 가지고 있는데, props는 함수 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 둘 모두 렌더 업데이트(리 렌더링)을 촉발한다.
State는 Component가 마운트(*어떤 것을 이용 가능한 상태가 되도록 준비하는 것) 될 때 기본값에서 시작되어 사용자 이벤트에 따라 변경된다. 부모의 구성 요소 따위에 의해 직접 변경되지 않으며 (props는 변경될 수 있음) Component 내부에서 변경할 수 있다.

State는 즉, 간단히 ‘리액트 컴포넌트의 변경 가능한 데이터’이다. 이는 직접 변경이 불가능하며 setState()… 함수를 이용해 변경할 수 있다. 이 state의 변경은 사이트의 재렌더링을 유도하므로, 리렌더링이 필요할 때에나 데이터 흐름이 필요할 때에 주로 사용하고 다른 때에는 사용을 지양해야 한다. State가 변경되는 모든 행위는 Component의 재렌더링을 불러일으키기 때문에, 불필요한 경우에 Component를 리렌더링해 사이트의 성능을 저하시킬 수 있어서이다.

State는 다음과 같이 선언한다::

State를 사용하는 이유::

-변수는 변경되어도 자동으로 화면이 바뀌지 않으나, state를 사용하면 자동으로 화면을 바꿀 수 있다.

-유동적인 변수를 사용할 때 화면에 그려지는 변수도 정상적으로 변경되길 원한다면 사용할 것. (일반 변수는 변하지 않는다.)

setState의 동작::

-setState는 비동기적으로 작동한다. 이벤트 핸들러 안에서 현재 state의 값에 대한 변화를 요청하기만 하는 것이기에, 이벤트 핸들러가 끝나고, 리액트가 상태를 바꾼 뒤 화면을 다시 그리기를 기다려야 한다.

-또, 리액트는 이벤트 핸들러가 닫히는 시점에 setState를 종합하여 한 번에 처리한다. stae도 결국 객체이기 때문에, 같은 키값을 가진 경우라면 가장 마지막 실행값으로 덮어씌워지는데 이는 객체를 합치는 함수인 Object.assign()에서 확인할 수 있다.

-setState에는 두 가지 사용법이 있다.

>setState(value)
>setState(callback)

이 그것이다.

이 중 setState(value)는 state의 내용을 value로 바꾸는 함수인데, 이 때 setState를 사용한다 하여 state가 바로 변경되는 것이 아니라는 점을 유의하여야 한다. setState-state 업데이트(state 변경 함수)는 비동기적으로 처리된다. 그래서 setState()의 실행이 오래 걸리면 이 코드의 실행을 잠시 보류하고 다른 밑에 있는 코드들부터 실행할 수 있다. 이는 예상하지 못한 문제를 가져올 수 있다.

이를 해결하기 위한 방법이 setState(callback)이다. setState 함수 안의 인자를 함수로 받으면, 매개함수인 콜백 함수를 먼저 실행한 뒤에야 setState를 실행한다. 비동기적인 함수 중 일부를 선형적으로 해결하는 셈이다.

이 외에도 useEffect를 사용하는 방법이 있다. useEffect() 함수는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 해주는 Hook이다. 이 함수를 잘 사용하면 함수형 컴포넌트 역시 컴포넌트의 마운트, 업데이트, 언마운트 단계 별로 특정 작업을 처리할 수 있게 된다.

최근엔 state를 이용하여 간단한 counter를 만들었다. 코드는 다음과 같다::

[참고 자료]

-https://devyihyun.tistory.com/191

-https://velog.io/@hamham/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-state%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

-https://ko.legacy.reactjs.org/docs/faq-state.html

-https://velog.io/@rookieand/React%EC%9D%98-state-%EA%B7%B8%EB%A6%AC%EA%B3%A0-useState%EC%97%90-%EB%8C%80%ED%95%B4-%EB%8D%94-%EC%95%8C%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%A1%8C%EB%8B%A4

-https://despiteallthat.tistory.com/176

-https://github.com/uberVU/react-guide/blob/master/props-vs-state.md