[React] 리액트 Props란?

React에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 중요한 방법입니다. props는 컴포넌트가 동작하는 방식을 정의하거나, 동적인 데이터를 전달해 UI를 업데이트하는 데 사용됩니다. props의 개념, 사용법, 그리고 활용 사례에 대해 자세히 알아보겠습니다.

 

React Prop - 커버 이미지

 

React Props: 컴포넌트 간 데이터 전달의 핵심

 

목차

1. Props란?

2. Props 사용법

3. Props로 함수 전달하기

4. Children Props

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Props란?

Props(properties)는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 매개변수입니다. 간단히 말해, props는 컴포넌트의 입력 값이라고 할 수 있습니다. 이러한 props는 자식 컴포넌트 내에서 읽기 전용(read-only)으로 사용되며, 직접 수정할 수 없습니다. 즉, 불변성(immutability)을 유지하면서 컴포넌트 간의 데이터 흐름을 제어합니다.

 

2. Props 사용법

React에서 props는 HTML 속성(attribute)처럼 작성됩니다. 부모 컴포넌트에서 자식 컴포넌트에 값을 전달할 때, JSX 태그의 속성으로 전달할 수 있습니다. 속성을 지정해 주면각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다.

 

아래 예시에서 App 컴포넌트는 Box컴포넌트에 color이라는 props를 전달합니다. Box 컴포넌트는 props.color을 사용해 "black"을 화면에 출력합니다.

// app.js
import Box from './box.js';

function App() {
  return (
    <Box color="black" />
  );
}

export default App;

// box.js
export default function Box(props) {
  console.log(props) // { color: "black" }
  return <div className='box'>{props.color}</div>; // black
}

 

하나의 컴포넌트에 props를 여러개 전달할 수 있습니다. 각 props는 독립적으로 정의되고, 자식 컴포넌트는 이를 개별적으로 참조할 수 있습니다.

// app.js
import Box from './box.js';

function App() {
  return (
    <Box color="black" size="small" />
  );
}

export default App;

// box.js
export default function Box(props) {
  console.log(props) // { color: "black", size: "small" }
  return (
    <>
      <div>{props.color}</div> // black
      <div>{props.size}</div> // small
    </>
  )
}

 

Destructuring 문법을 사용하면 코드를 좀 더 간결하게 사용할 수 있습니다.

// box.js
export default function Box({color, size}) {
  return (
    <>
      <div>{color}</div> // black
      <div>{size}</div> // small
    </>
  )
}

 

3. Props로 함수 전달하기

props는 단순히 값만 전달하는 것이 아니라, 함수도 전달할 수 있습니다. 이를 통해 자식 컴포넌트가 부모 컴포넌트의 함수를 호출할 수 있으며, 이는 컴포넌트 간의 상호작용을 가능하게 합니다.

// app.js
function App() {
  const handleClick = () => {
    alert("Button clicked in Child component");
  };

  return <Button onClick={handleClick} />;
}

// button.js
export default function Button(props) {
  return <button onClick={props.onClick}>클릭</button>;
}

 

위 예시에서 Parent 컴포넌트는 handleClick 함수를 Child 컴포넌트로 전달하고, 자식 컴포넌트는 부모의 함수를 호출하여 버튼 클릭 이벤트를 처리할 수 있습니다.

4. Children Props

React의 children props는 컴포넌트 안에 다른 컴포넌트를 포함하거나, HTML 요소를 자식으로 넘겨줄 때 사용되는 특별한 props입니다. 쉽게 말해 부모 컴포넌트의 태그 사이에 전달된 모든 내용을 자식 컴포넌트에서 받아 사용할 수 있게 합니다.

// app.js
function App() {
  return(
    <Box>
      <h1>React, Props</h1>
      <p>Children Props Example</p>
    </Box>
  )
};

// box.js
export default function Box(props) {
  return <div>{props.children}</div>;
}

 

위 예시를 보면 Box 컴포넌트가 children props를 사용해 h1과 p 태그를 받아 렌더링 한 것을 볼 수 있습니다.

 

 

 

Props는 React에서 컴포넌트 간에 데이터를 전달하는 가장 기본적인 방식입니다. props를 사용하면 컴포넌트의 재사용성을 높이고, 부모-자식 간의 데이터를 명확하게 관리할 수 있습니다. props는 React의 단방향 데이터 흐름을 이해하는 중요한 개념으로, props를 효과적으로 사용하는 것은 더 유지보수 가능한 애플리케이션을 만드는 데 필수적입니다.

 

 

추천글

[React] 리액트 컴포넌트란?