React의 state

mia·2023년 4월 8일

React를 글로 배워보자

목록 보기

13/16

데이터 바인딩

데이터 바인딩이란 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.
자바스크립트에서는 데이터가 변경될 때마다 화면의 데이터와 맞춰주는 과정이 필요했지만 리엑트에서 데터 바인딩을 제공하면서 번거로운 과정이 생략되었다. 리액트는 단방향 데이터 바인딩을 사용한다.
ex) HTML에서 서버 혹은 스크립트 상에서 받아온 데이터를 화면상에 그려주고 있다고 가정했을 때, 해당 값이 변경 될 경우 다시 HTML상에 데이터를 변경된 값에 따라서 맞추어 주는 동작

단방향 데이터 바인딩

컴포넌트 내에서 단방향 데이터 바인딩은 JavaScript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화 하는 것을 의미한다.
단방향 데이터 바인딩이기 때문에 역으로 HTML에서 JS로의 직접적인 데이터 갱신은 불가능하다.
-> 이벤트 함수를 통해 함수를 호출하여 JS에서 HTML로 데이터를 변경해야한다.
React에서는 setState를 사용하여 자동 re-render를 하면서 데이터 바인딩을 한다.
state는 state를 가지고 있는 컴포넌트 안에서만 접근가능하기 때문에 캡슐화라고 불리기도 한다.
컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달 된다. 이때 부모 컴포넌트에서 전달되는 데이터를 props라고 한다.

state와 props의 차이

state는 해당 컴포넌트에서 관리되며 props는 부모로부터 전달받고 읽기 전용이다.

state와 렌더링

state가 변경될 때 화면이 re-render된다.
사실 state가 아닌 setState를 사용할 때에만 re-render가 일어나고 state를 직접 변경할 경우에는 re-render가 일어나지 않는다.
-> 우리는 자동으로 값을 업데이트하기 위해 state를 사용한다. 그렇기 때문에 setState를 통해 state값을 변경하는 것은 중요하다!

state의 생명주기

render 함수 실행 -> 화면 업데이트 -> setState가 component update process trigger -> state 변경 감지 -> shouldComponentUpdate가 state에 변경사항이 있는지 비교연산 -> re- render & 변경사항 업데이트

setState & State as a Snapshot

리액트는 컴포넌트가 re-render될 때까지 state를 갱신하지 않는다. 즉, setState는 state를 바로 갱신하지 않는다. state 변경사항을 대기열에 집어넣고 컴포넌트에게 새로운 state를 사용하기 위해 re-render를 해야한다고 알린다.
다만 함수가 실행되었을 때 사용자가 상호작용한 시점의 상태 스냅샷을 넘기기 때문에 re-render전에 추가적인 변동이 있더라도 반영되지 않는다.
setState는 비동기적으로 작동하기 때문에 setState를 연속적으로 호출시키더라도 state 값이 변하지 않는다.

import React, {useState} from 'react';

export default const Counter = () => {
	const [count, setCount] = useState(0);
  
  	const handleClick = () => {
    	setCount(count + 1);
      	setCount(count + 1);
      	setCount(count + 1);
    }
	
  	return (
  		<div>
    		<p>Count: {count}</p>
			<button onClick={handleCilck}>Increase</button>
    	</div>
  	)
	// 클릭 이벤트 발생시 Count: 1이 된다.
    // setCount안에서 count는 render되기 전까지는 0이기 때문에 
    // setCount(0 + 1);
    // setCount(0 + 1);
    // setCount(0 + 1);
    // 이 되어버리기 때문이다.
}

비동기 setState

React는 성능의 향상을 위해 setState의 실행을 지연시키고 여러 컴포넌트를 한번에 갱신한다.
이렇게 데이터를 실시간으로 처리하지 않고 종합하여 처리하는 것을 배치처리라고 한다.
setState를 연속적으로 호출하면 setState를 모아서 배치처리 한 후 re-render한다.
setState는 state를 바로 갱신하지 않을 수 있기 때문에 최신 state나 props를 사용하려면 setState에 updator를 넘기거나, 생명주기 함수인 componentDidUpdate를 활용해야한다.