Props

리액트에서 props는 "properties"의 줄임말로, 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달하는 메커니즘을 의미한다. props를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하여 컴포넌트 간에 정보를 공유할 수 있다.

props는 부모 컴포넌트에서 자식 컴포넌트로 읽기 전용(read-only)으로 전달된다. 이는 자식 컴포넌트가 props를 변경하거나 수정할 수 없음을 의미한다. 이러한 일반적인 데이터 흐름은 리액트 애플리케이션의 예측 가능성과 유지보수성을 향상시킨다.

props는 다양한 종류의 데이터를 전달할 수 있다. 예를 들어, 문자열, 숫자, 배열, 객체, 함수 등의 데이터 타입을 props로 전달할 수 있다. 부모 컴포넌트에서 props를 통해 자식 컴포넌트로 데이터를 전달하면 자식 컴포넌트에서는 해당 데이터를 읽을 수 있다.

// 자식 컴포넌트 정의
function ChildComponent(props) {
  return <div>안녕하세요, {props.name}!</div>;
} 

이렇게 자식 컴포넌트를 정의하고 파라미터로 props를 받으면 부모 컴포넌트에서 이 props를 이용할 수 있다.

// 부모 컴포넌트에서 자식 컴포넌트 호출
function ParentComponent() {
  return <ChildComponent name="React" />;
}

ChildComponent에서는 이 props를 사용하여 화면에 "안녕하세요, React!"를 렌더링한다. 이처럼 props를 사용하면 컴포넌트 간에 데이터를 전달하고 동적인 내용을 표시할 수 있다.

하지만 이렇게 전달할 props가 많아지면 객체를 생성해서 보내주어도 된다.

// 부모 컴포넌트
const counterProps = {
        a:1,
        b:2,
        c:3,
        initialValue: 5,
    };