[React.js] 상태

남현우·2022년 10월 24일

React State batch 리액트 상태

React

목록 보기

2/4

상태

상태란 무엇일까라는 질문에 리액트를 조금이라도 접해본 사람은 state를 먼저 떠올릴 것이다.
그럼 그 State는 무엇을 의미하는지 어떻게 동작하는지를 알아보려한다.

데이터바인딩

State, 즉 상태를 이해하기 위해서는 변수를 사용하는 방법을 먼저 알아볼 필요가 있다.
변수를 사용하는 데이터 변경이 있는 웹의 한 예시를 아래를 통해 확인하겠다.

	const Btn = document.querySelector('#btn');
    const Txt = document.querySelector('#count');
    
    Btn.addEventListener('click',function(){
    	const count = Number(number.textContent)+1;
    	Txt.textContent = count;
	});

위를 확인하면 일반 변수에 담긴 데이터가 변경될 때마다, DOM에 접근하여 직접적으로 수정함을 확인할 수 있다.

이는 우리가 저번에 확인한 데이터 바인딩이라는 기법과 비슷함을 알 수 있다.
다시 설명하자면, 데이터 바인딩은 제공자와 소비자의 데이터를 일치하는 기법으로
쉽게말해 위는 JS의 값이 변경됨에 따라 DOM에 표현되는 값도 변경되도록 하는 단방향 데이터 바인딩을 흉내낸 것이다.

State

이번에는 React의 state를 활용하는 데이터 변경이 있는 웹의 한 예시를 살펴보겠다.

	class Counter extends React.Component{
    	constructor(){
        	this.state = {
            	count: 0,
            }
        }
        
        increaseCount(){
        	this.setState((state)=>{
            	count: state.count+1
            });
        }
        
        render(){
        	return(
            <>
            	<button onClick={increaseCount}>+1</button>
                <p>count = {this.state.count}</p>
            </>
            );
        }
    }

class라는 형태에 인해 변수를 사용해 DOM에 직접적으로 접근할때보다 코드가 길어진 것 같지만, 실제로 내용은 훨씬 간결해졌다.
이는 리액트가 단방향 데이터 바인딩을 제공하는 덕분인데, setState를 통해 state를 변경하면 리렌더링이 일어나는 과정을 통해 이루어진다.

정리하자면, state는 데이터 바인딩을 통해 변경되는 데이터를 표현하고자 할 때 사용하는 변수라고 이해하면 된다.

Props

일반적으로 state에 대해 안다면 props와 state의 차이점을 묻는 질문도 종종 있다.
둘은 변경되었을 때 리렌더링 된다는 공통점을 가지지만 큰 차이가 있다.

간단하게 state는 해당 컴포넌트 내에서만 관리되지만, props는 매개변수와 같이 부모로부터 전달받는 읽기 전용 데이터이다.
즉, 부모 컴포넌트의 state를 자식 컴포넌트에게 매개변수처럼 전달해주었을 때 이를 props로 전달한다고 하게 된다.

State 변경시

앞에서 state가 useState 즉, setState를 통해서 변경되면 화면의 리렌더링이 진행된다고 말했다.
이는 React가 setState를 사용해야 update process를 실행하기 때문에 변경사항이 있음을 인지하고 리렌더링할 수 있기 때문이다.

그렇다면 setState를 2번 연속해서 사용한다면 어떻게 될까?
간단한 예상대로라면, 두 번째 setState가 실행되기 전에 리렌더링이 이루어져 두 번째 setState는 실행이 안될 것이다.
하지만 setState의 Batch 처리를 이해하면 이런 예상은 하지 않게 된다.

Batch

Batch 처리란 Batching(배칭)이라고 불리며, 데이터를 실시간으로 처리하지 않고 묶어 처리하는 기능을 의미한다.
또한, React에서는 state 업데이트를 하나의 리렌더링으로 묶어주는 기능을 의미한다.

예로 setState를 10번을 연속으로 실행한다고 가정했을 때, 리렌더링은 10번이 실행될 것이다.
이는 10번이지만 setState가 늘어날 수록 성능저하는 점점 커질 것이다.
하지만, Batch 처리를 진행한다면 setState는 state 변경사항을 대기열에 집어넣고, 한 번의 리렌더링을 통해
변경된 state값을 업데이트하고 처리할 수 있을 것이다.

함수형 컴포넌트에서 State

최근에는 class형 컴포넌트를 지양하고 함수형 컴포넌트를 지향하고 있다.
함수형 컴포넌트는 stateless 컴포넌트라고도 불리는데, 말 그대로 state가 없는 컴포넌트이다.
이는 일반적으로 함수가 끝날 때, 변수가 사라지기 때문에 함수가 다시 실행될 때마다 state는 초기값으로 돌아가기 때문이다.

그렇다면 우리가 사용하는 useState는 무엇인가하면 바로 state값을 함수형 컴포넌트에서도 활용하기 위해 만들어진 hook이다.
이를 통해 함수형 컴포넌트에서도 state를 사용할 수 있게 되었고, 위에서 본 class형 컴포넌트 코드를 아래와 같이 작성할 수 있게되었다.

	const Counter = () =>{
    	const [count, setCount] = useState(0);
        
        render(){
        	return(
            <>
            	<button onClick={setCount(count+1)}>+1</button>
                <p>count = {count}</p>
            </>
            );
        }
    }