[React] Props에 대한 설명과 예시

리액트(React)에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되는 속성입니다. 이것은 부모 컴포넌트가 자식 컴포넌트에게 데이터나 함수를 전달하여 상호작용하거나 구성하는 데에 사용됩니다. props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 전달되며, 자식 컴포넌트에서는 이를 읽기 전용으로 사용합니다.

간단한 props의 사용 예시를 보여드리겠습니다:

1. 부모 컴포넌트에서 자식 컴포넌트로 문자열 전달하기:
2.  

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const message = '안녕하세요!';

  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
};

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

export default ChildComponent;

 

여기서 ParentComponent에서 ChildComponent로 message라는 문자열을 전달하고 있습니다. 자식 컴포넌트에서는 props.message를 통해 전달받은 값을 사용하여 화면에 출력하고 있습니다.

1. 부모 컴포넌트에서 자식 컴포넌트로 함수 전달하기:
   

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleButtonClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return (
    <div>
      <ChildComponent onClick={handleButtonClick} />
    </div>
  );
};

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <button onClick={props.onClick}>클릭하세요</button>
    </div>
  );
};

export default ChildComponent;

 

이 예시에서는 부모 컴포넌트에서 자식 컴포넌트로 handleButtonClick이라는 함수를 전달하고 있습니다. 자식 컴포넌트에서는 전달받은 함수를 이벤트 핸들러로 사용하여 버튼 클릭 시에 얼럿을 띄우고 있습니다.

 

❑ Props의 개념

● props는 prop 뒤에 복수형을 나타내는 s를 붙여서 prop이 여러 개인 것을 의미한다. prop은

property를 줄여서 쓴 것으로 속성이나 특성을 나타낸다. 여기서 속성은 리액트 컴포넌트의 속성이다.

앞서 컴포넌트는 붕어빵 틀에 비유하고 엘리먼트는 완성된 붕어빵으로 설명을 했다. 그렇다면 props는

어떤 것일까? props는 붕어빵에 들어가는 재료라고 생각하면 된다. 팥을 넣으면 팥붕어빵, 슈크림을

넣으면 슈크림 붕어빵, 고구마를 넣으면 고구마 붕어빵이 되는 것처럼 같은 컴포넌트에서 props에 따라

엘리먼트의 결과가 달라지는 것을 확인할 수 있다.

 

❑ Props 사용법

● props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체다. 컴포넌트에 props라는

객체를 전달하기 위해 어떻게 해야 하는지 살펴보도록 한다. 먼저 JSX를 사용하는 경우에는 아래 코드와

같이 키(key)와 값(value)로 이루어진 킷값 쌍의 형태로 컴포넌트에 props를 넣을 수 있다.

이 코드에 App 컴포넌트가 나오고, 그 안에 Profile 컴포넌트를 사용하고 있다. 여기서 Profile 컴포넌트에  name, introduction, age라는 세 가지 속성을 넣어주었다. 이렇게 하면 이 속성의 값이 모두 Profile  컴포넌트에 props로 전달되며 props는 아래와 같은 형태의 자바스크립트 객체가 된다.

name과 introduction에 들어간 문자열은 중괄호를 ㅈ사용하지 않았고, age에 들어간 정수는 중괄호를 사용했다. 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다고 배웠다. 마찬가지로 props에 값을 넣을 때에도 문자열 외에 정수, 변수, 다른 컴포넌트 등이 들어갈 경우 중괄호로 감싸주어야 한다. JSX를 사용하지 않을 경우는 createElement() 함수를 사용해서 아래와 같이 작성한다.