State / Props

안녕하세요 JJini 입니다.

오늘의 주제는 State에 대해 알아 보겠습니다 

 

State

- 컴포넌트의 내부에서 변경 가능한 데이터를 관리 할때 사용

React는 단방향 데이터 바인딩을 지원 하고 이는 데이터와 템플릿을 결합 하면 화면을 생성 합니다. 

 

변경 되는 데이터를 위해 React에서 지원 하는 State를 사용 할 수 있는데 

State를 사용 하면 자동으로 관련된 하면을 리랜더링 할 수 있다. 

Props

- 부모로 부터 전달 받는다 

- 읽기 전용 데이터 immutable 

State	Props
해당 컴포넌트 에서 관리	부모로 부터 전달 받는다
	읽기 전용 데이터

import { useState } from "react";

function App() {
  const [data, setData] = useState(0);

  function clickHandler() {
    setData(data + 1);
    console.log(data) // 0
  }

  return (
    <>
      <div>
        <p>{data}</p> // 1
        <button onClick={clickHandler}>Button</button>
      </div>
    </>
  );
}

export default App;

값은 어떻게 될까요?! 

console.log의 값은 0이 나올 것이고 화면의 값은 1이 나올 것입니다.

여기서의 핵심은 React는 컴포넌트가 리랜더링 될때 까지 state를 갱신 하지 않는 다는 것 입니다.

 

라이프사이클을 보면 state가 변경 => state가 변경됨을 감지 => 화면 리랜더링 하는게 순서인 걸 당연히 알 것이다 

사실상으로는 setState는 바로 갱신 하지 않는다 라는 걸 알 수 있습니다. 

 

이걸로서 저희는 setState는 비동기로 작동 한다는 걸 알 수 있습니다. 

 

그럼 여기서 최신 state나 props를 사용하려면 어떻게 해야 할까요?!

저는 두가지 방법이 있다고 생각 합니다. 

1. 첫번째 방법은 useEffect의 []에 추가 하여 활용 하는 방법

2. 두번째 방법은 업데이트 함수를 넘겨 주는 방법입니다. 

 

두번째 방법을 한번 확인 해보도록 할께요 처음 시작할때 많이 놓치는 부분이기도 하더라구여 

// 1번 코드
import { useState } from "react";

function App() {
  const [data, setData] = useState(0);

  function clickHandler() {
    setData(data + 1);
    setData(data + 1);
    setData(data + 1);
    setData(data + 1);
    setData(data + 1);
  }

  return (
    <>
      <div>
        <p>{data}</p>
        <button onClick={clickHandler}>+5</button>
      </div>
    </>
  );
}

export default App;

// 2번 코드
import { useState } from "react";

function App() {
  const [data, setData] = useState(0);

  function clickHandler() {
    setData((prevState) => return {prevState + 1});
    setData((prevState) => return {prevState + 1});
    setData((prevState) => return {prevState + 1});
    setData((prevState) => return {prevState + 1});
    setData((prevState) => prevState + 1);
  }

  return (
    <>
      <div>
        <p>{data}</p>
        <button onClick={clickHandler}>+5</button>
      </div>
    </>
  );
}

export default App;

1번 코드의 값은 1이지만 2번 코드의 값은 무엇일까요?! 답은 5가 나옵니다 왜 그런 것일까요?

1번 보드와 비교해 2번 코드는 setState의 객체를 넘겨주는 것이 아닌 함수를 넘겨 주고 있는 것을 확인 할 수 있습니다.

이것을 업데이트 함수라고 합니다.

 

업데이트 함수는 두가지의 매게 변수를 가지는 (state, props) 두가지다 최신 state와 최신 props를 보장 해주기 때문에 2번 코드가 5가 될 수 있습니다.

 

왜 setState는 비동기로 작업 하는 건지 궁금 한 사람들도 있을 것 같다. 

 

해당 이슈는 성능 때문에 그렇다

setState가 동기라고 예를 들었을 때 

부모 컴포넌트와 자식 컴포넌트가 이벤트가 발생 하였고 둘다 setState가 실행 되었고 그럴때 자식 컴포넌트도 setState 실행 되자 마자 리랜더가 되고 

부모도 발생 하자마자 리랜더가 되는 부모가 리랜더링 되므로써 자식은 불필요 하게 한번더 리랜더링 되게 되니 

n번 변경 만큼 n의 랜더링이 되기 때문에 

 

React는 배치 처리 후 리랜더링을 발생 시킵니다.