[리액트] Props와 State

Props

부모가 자식 컴포넌트에 값을 전달하는 방식.

마치 함수의 매개변수처럼 외부에서 넣어주는 값이다.

📘 예시
function Greeting({ name }) {
  return <h1>안녕, {name}!</h1>;
}

function App() {
  return <Greeting name="삼록" />;
}

여기서는 App이 부모컴포넌트고 <Greeting>태그를 통해 자식 컴포넌트를 사용하고 있다.

이때 name옵션으로 Greeting컴포넌트에 삼록이라는 값을 넘겨주고 있다.

 

Vue.js에서도 똑같은 개념의 Props가 존재한다.

단, 차이점이라면 Vue.js에서는 사용하는 Props에 대해 명시적으로 선언해주는 부분이 있었다.

<!-- Child.vue -->
<template>
  <h1>{{ name }}</h1>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

props  : {} 부분에서 이 컴포넌트가 받을 수 있는 속성을 명시해주어야 했다.

그러나 리액트에서는 이렇게 따로 선언하는 부분이 없는 것이 좀 더 간단하게 사용할 수 있는 장점이 되는 듯 하다.

 

State

state는 컴포넌트 내부에서 바뀌는 값을 저장하는 변수다.

리액트는 상태가 바뀌면 화면이 자동으로 다시 렌더링된다. 

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

 

리액트에서는 state값을 사용하기 위해서는 useState라는 리액트 내장함수를 사용해야한다.

useState는 컴포넌트 안에서 상태(state)를 만들고, 그 상태값이 바뀔 때 화면을 자동으로 다시 그리게(리렌더링) 해주는함수다.

 

그리고 useState()에 대한 값을 구조분해할당으로 받고 있다.

 

그 이유는 useState()가 '배열을 리턴'하기 때문이다.

[현재상태값, 상태를 바꾸는 함수]