(React) Props & State

Props

• 컴포넌트의 속성(property)을 의미한다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. (단방향 데이터 흐름)
• 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.
• 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다.

예시

• App.js : Box컴포넌트를 공통으로 사용하되, 제목과 내용을 다르게 렌더링하기 위해 각각의 박스에 num과 text 속성을 정의한다.

import "./App.css";
import Box from "./component/Box";

function App() {
  return (
    <div>
      <Box num="1" text="Hi"/>
      <Box num="2" text="Hello"/>
      <Box num="3" text="👋"/>
    </div>
  );
}

export default App;

• Box.js: 전달인자로 props를 내려받아서 아래와 같이 적용할 수 있다.

import React from 'react'

const Box = (props) => {
  return (
    <div className="box">
    Box {props.num}
    <p>{props.text}</p>
  </div>
  )
}

export default Box

구조 분해 할당을 사용하여, 아래와 같이 받을 수도 있다.

import React from 'react'

const Box = ({num, text}) => {
  return (
    <div className="box">
    Box {num}
    <p>{text}</p>
  </div>
  )
}

export default Box

• 결과 : 공통으로 Box 컴포넌트는 재활용하면서, 각각의 박스마다 제목과 내용을 다르게 보여준다.
  

State

• 컴포넌트를 사용하는 동안 컴포넌트 내부에서 변할 수 있는 값
• 일반 변수와 다르게 변하는 값, 변할 수 있는 값을 state로 정의한다.
• state값은 비동기적으로 처리된다.
• state가 변경되면 컴포넌트가 갱신되면서 렌더링된다.
  
  

React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공한다. 이를 import하여 사용한다.

import { useState } from 'react';

useState 를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수입니다. useState 의 인자로 넘겨주는 값은 state의 초깃값이다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

예시

버튼을 두 개 만들어서 버튼1을 누르면 숫자가 올라가도록하고, 버튼2를 누르면 숫자를 초기화하도록 해보자

• 클릭 횟수의 현재 state를 counter, state를 갱신하는 함수를 setCounter로 정의한다. (초기값: 0)

const [counter, SetCounter] = useState(0);

• 숫자를 증가시켜주는 함수와 초기화 시켜주는 함수를 만들고 이를 onClick 리스너로 버튼을 클릭했을 때 함수가 실행되도록 한다.

const increase = () => {
    setCounter(counter+1)
  }
  const reset = () => {
    setCounter (0);
  }

→ 전체 코드

import "./App.css";
import { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  const increase = () => {
    setCounter(counter+1)
  }
  const reset = () => {
    setCounter (0);
  }
  return (
    <section>
      <div>횟수: {counter}</div>
      <button onClick={increase}>클릭</button>
      <button onClick={reset}>초기화</button>
    </section>
  );
}

export default App;

button1에는 onClick 리스너로 클릭을 하면 increase 함수가 실행되도록, button2는 reset 함수가 실행되도록 했다.

정리

• props는 외부로부터 전달받은 값
• state는 컴포넌트 내부에서 변하는 값