React Props, State

props and state

# 개요

React로 프론트 개발을 한다면, 기본적으로 props와 state에 대한 이해가 필수적이다. 해당 두가지는 데이터를 다룰 때 사용되는 개념으로서 각각의 특징과 쓰임, 차이점에 대해 알아볼 것이다.

 

 

# Props

• 불변 데이터
• 부모로부터 전달
• 외부(부모) component에서 상속 받는 데이터

먼저 props는 properties의 줄임말로서, state와 확연한 차이를 보이는 것은 불변하는 데이터라는 점이다. component는 부모 component로 부터 props를 받고, 해당 porps는 상속 받은 component에서 사용할 수 있지만, 변경이 불가한 read only 데이터이다. 이것은 React에서 부모 > 자식 일방향성 상속이라는 특징이라 할 수 있다.

 

 

const child = ({name}) => {
  return <div>전달받은 props는 {name}입니다.</div>
}

const parent = () => {
  return <child name = "React"/>
}

export default parent;

 

 

# State

• 가변 데이터
• 구성 요소에 의해 유지
• 내부 component에서 생성 및 사용
• 변화시키면 re-render가 일어난다.

다음으로 state는 component의 상태를 나타내고, 이 역시 가장 큰 특징은 props와 다르게 변경이 가능한 가변 데이터라는 것이다. component 내부에서 선언되어, 스스로 관리한다. 해당 state는 component의 상태값을 나타내기 위해 주로 사용한다.

import React, { useState } from 'react';

const example = () => {
  const [count, setCount] = useState(0);

  return(
    <div>
      <p>{count}번 클릭하셨습니다.</p>
      <button onClick={() => setCount(count+1)}>
        클릭
      </button>
    </div>
  ); 
}

export default example ;

 

• useState

React Hooks에서 제공하는 useState() 함수를 사용하여 선언하는 state의 상태 초기값 설정이 가능하다.

 

• setState

state는 직접 변환하지 않고, setState()를 이용하여 component의 state 객체에 대한 업데이트를 실행한다. state가 변경되면 component는 re-rendering된다. 따라서 setState를 function이나 class, 또는 특정 action 없이 사용하면 너무 많은 re-render 때문에 오류가 발생한다.

re-render error

# 차이점

props와 state는 일반 자바 스크립트의 객체이다. 두가지 객체 모두 rendering 결과물에 영향을 주는 정보를 가지고 있는데, 차이점을 보이는 것은 props는 인스턴스처럼 component에 전달되는 반면 state는 함수 내에 선언된 변수처럼 component 안에서 관리된다는 것이다.