[React.js] Props & State

props vs state

부모에게서 전달받은 props는 변경할 수 없습니다. 하지만 state는 해당 컴포넌트 내부에 있는 데이터이기 때문에 자유롭게 변경이 가능합니다.

 

둘의 공통점은 값이 변경되는 경우 렌더링이 발생합니다. 어떻게 생각하면 화면을 다시 그려줘야 하기 때문에 당연하다고 생각할 수 있습니다.

state

컴포넌트 내부에 state를 사용하는 이유는 react가 state의 변화를 파악해 자동으로 re-rendering을 해주기 때문입니다. 기존에 사용하던 변수를 사용하는 경우 값은 변하지만 re-rendering이 발생하지 않아 화면에 반영되지 않습니다.

 

결론적으로 react에서 state를 사용하면 re-rendering을 자동으로 해주기 때문에 변하는 데이터에는 사용해야 한다는 것입니다.

 

사용하는 방법은 useState()로 state를 생성하고 해당 함수의 반환값을 이용하면 됩니다.

import React from "react";
// import {useState} from "react";

export default function Test() {
  const result = React.useState();
  // const result = useState();
  console.log(result); // [undefined, f()]
  
  return ...
}

 

우선  React.useState()를 통해서 나온 결괏값을 살펴보면, 배열에 하나의 값과 하나의 함수가 담겨있습니다.

 

값은 저희가 원하는 변하는 state를 넣는 곳이고, 두 번째 요소인 함수는 해당 값을 바꾸는 setState함수입니다.

 

useState 함수는 state의 기본값을 설정하는 파라미터를 가지고 있습니다. 함수의 인자로 아무것도 전달하지 않으면 위처럼 undefined가 할당됩니다.

 

초기값을 주고 다시 결과를 보겠습니다.

import {useState} from "react";

export default function Test() {
  const result = useState('nulzi');
  console.log(result); // ['nulzi', f()]
  
  return ...
}

 

이번에는 두 번째 요소인 setState 함수를 살펴보겠습니다. state는 변경이 가능하다고 했지만, 기존 변수에 새로운 값을 할당하는 것처럼 값을 바꿀 수 없습니다. 그렇기에 setState 함수를 활용해 값을 변경해야 합니다.

import {useState} from "react";

export default function Test() {
  const [state, setState] = useState('nulzi');
  
  // setState('name'); // error
  const handleClick = () => {
    setState('name');
  }
  
  return (
    <div>
      <h1>{state}</h1>
      <button onClick={handleClick}>change</button>      
    </div>);
}

이렇게 위처럼 setState로 state의 값을 바꾸면 자연스럽게 화면의 내용도 바뀝니다.

주의 사항! 함수 내부에서 바로 setState를 동작시키면 에러가 발생합니다. 해당 에러는 state가 변경되면 re-rendering 되는데, 해당 렌더링이 무한대로 반복되기 때문에 에러가 발생합니다. 무한으로 re-rendering이 발생하는 이유는 state가 바뀌어서 함수가 다시 실행되었는데 다시 setState가 동작해 state가 계속 변경되기 때문입니다.

 

참고

https://react.dev/reference/react/useState

https://scrimba.com/learn-react-c0e