setState()란? state와 props의 차이점 정리

안녕하세요 jju_developer입니다.

 

앞서서 배운 props에 이어서 setState에 대해 알아보겠습니다!!

 

setState()란?

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다.

state가 변경되면, 컴포넌트는 리렌더링 됩니다.

 

리액트(React)의 state는 컴포넌트 내부의 변경 가능한 값이라고 했습니다.

클래스형 컴포넌트는 state를 사용하고, 

함수형 컴포넌트는 useState 훅(클래스 내부에서는 동작 X)을 사용합니다.

그렇다면 일반적으로 사용하는 변수를 두고 왜 state를 사용해서 값을 관리할까요?

이는 state가 갖는 특성 때문인데요. 

 

바로 값이 변경되면 리렌더링(Re-rendering)이 발생하기 때문입니다.

따라서 값이 변화함에 따라 실시간으로 화면이 렌더링 되고 변화된 값이 화면에 바로 반영됩니다.

값의 변화를 리액트도 알아차릴 수 있게 해주어야 하므로 

값의 변경은 리액트가 제공하는 함수를 통해서만 이루어져야 합니다.

 

setState()의 특징

1. 기본적으로 비동기로 동작합니다.
2. 연속적으로 호출했을 때 리액트 내부적으로는 BATCH 처리를 합니다.
3. state 객체를 넘겨줄 수 있을 뿐만 아니라 새로운 state를 반환하는 함수를 인자로 넘겨줄 수 있습니다.

기본적으로 setState() 함수는 state를 변경하고 state가 포함된 해당 컴포넌트를 다시 렌더링 하지만.

이게 동기적으로 동작하는 것이 아니라 비동기적으로 동작함에 주목해야 합니다.

(= setState()를 실행하자마자 바로 state를 변경하고 바로 렌더링 하는 게 아닙니다!).

 

동기(Synchronous) – 순서대로 하나씩 처리.
비동기(Asynchronous) – 순서가 아닌 이벤트에 따라 처리.

 

그렇다면 state 설정은 why 비동기로 작동할까요?

위에서 설명한 대로 state는 값이 변경되면 리렌더링이 발생하는데요.

변경이 하나라면 리렌더링이 한 번만 발생하지만 수십 개, 수백 개의 값이 계속 변경된다면 

리액트는 매번 렌더링만 하다가 생을 마감하고 말 것입니다.

속도도 당연히 느려지겠죠?!

따라서 변경된 값들을 모아 한번에 업데이트를 진행하여 렌더링을 줄이고자

배치(Batch) 기능을 사용해 비동기로 작동한다고 볼 수 있습니다.

참고로 배치 업데이트는 16ms 주기라고 합니다!

 

state와 props의 차이점은 무엇인가요

props (“properties”의 줄임말)와 state는 일반 JavaScript 객체입니다. 

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 

한 가지 중요한 방식에서 차이가 있습니다. 

props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면에,

state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

 

React에서 this.props와 this.state는 모두 렌더링 된 값을 나타냅니다. 

다시 말해 현재 화면에 보이는 것을 말합니다.

setState 호출은 비동기적으로 이뤄집니다.

따라서 setState 호출 직후 새로운 값이 this.state 에 반영될 거라고 믿어서는 안 됩니다.

이전 state 값을 기준으로 값을 계산해야 한다면 객체 대신 updater 함수를 전달하여야 합니다.

 

 

참고하면 좋을 블로그 : https://leehwarang.github.io/2020/07/28/setState.html

 

 

오늘도 수고하셨습니다 ^.^