2) Props와 State

1. Props - 속성

Props는 부모컴포넌트에서 자식컴포넌트로 값을 전달하기 위해 사용하는 속성입니다. 리액트에서는 데이터를 오직 부모컴포넌트에서 자식컴포넌트로만 전달할 수 있습니다. 이는 데이터의 흐름을 단방향으로 만들어서 코드를 예측하기 쉽게 만들기 위한 설계입니다. 자식 컴포넌트는 부모컴포넌트로부터 전달받은 데이터를 읽기전용으로 사용합니다.

Props는 보통 여러 자식 컴포넌트의 화면 및 동작을 하나의 부모컴포넌트에서 컨트롤해야하는 경우에 사용합니다.

요약

• 부모컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용합니다.

  • 자식에서 부모로 X

  • 자식에서 자식으로 X

• 전달된 값은 자식 컴포넌트에서 읽기전용으로 사용됩니다

• Props로 전달하여야 하는 경우

  • 자식컴포넌트의 동작, 스타일을 제어해야 하는 경우

// 부모 컴포넌트
function Parent() {
  return <Child name="홍길동" />;
}

// 자식 컴포넌트
function Child(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

2. State - 상태

State란 컴포넌트에서 화면과 상호작용을 해야 하는 값을 저장하고 있는 데이터입니다. 리액트는 이러한 컴포넌트의 상태(State)를 관리하면서 컴포넌트의 상태에 변화가 생기는 경우 그 변화를 렌더링합니다. 페이스북이나 인스타그램에서 클릭시 증가하는 좋아요 수, 팔라우 상태 등이 대표적인 State예시라고 할 수 있습니다.

요약

• 컴포넌트 내부에서 선언하고 관리하는 동적인 데이터입니다.

• 상태가 변경되면 컴포넌트는 자동으로 다시 렌더링됩니다.

• 주로 사용자 입력, UI 상태 변경 등 내부 변화 감지에 사용됩니다.

import { useState } from "react";

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

  const handleClick = () => setCount(count + 1);

  return (
    <div>
      <h2>현재 카운트: {count}</h2>
      <button onClick={handleClick}>+1 증가</button>
    </div>
  );
}

1) useState

함수형 컴포넌트에서 state를 사용하기 위한 함수입니다. useState함수 호출시 state값을 저장하고 있는 변수와, 이 state값을 변경할 수 있는 함수를 반환합니다.

const [값을담을변수, 값을변경하는함수] = useState(초기값);

• useState함수의 반환값은 길이 2짜리 배열입니다. 이를 배열 비구조화할당 문법을 통해 저장합니다.

• 리액트는 값을변경하는 함수가 호출될 때, 기존 state값과 다른점이 있다면 변경된 내용을 화면상에 렌더링합니다.