리액트에서 props란?

 

props란?

리액트 공식문서에는 아래와 같이 기술하고 있다.

모든 리액트 컴포넌트는 그들의 props에 관해서 Pure 함수 같은 역할을 해야 한다.

 

이 말은 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄 것!   여기서 결과란 리액트 엘리먼트를 말한다.

 

Pure함에 대한 개념 정리 참고

https://moo-you.tistory.com/1049

Pure함수 Impure함수 개념이해

 

사용법

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

컴포넌트에 props라는 객체를 전달하기 위해서는 jsx를 사용하는 경우 키와 값으로 이루어진 키-값 쌍의 형태로 컴포넌트에 props를 넣을수 있다.

 

예시

import React from 'react';

// 자식 컴포넌트
function Greeting(props) { //props를 받아 그 값을 사용해 화면에 이름과 메시지를 출력
  return (
    <div>
      <h1>안녕하세요, {props.name}님!</h1> //{props.name} 부모 컴포넌트로부터 받은 name출력
      <p>{props.message}</p> /{props.message} 부모 컴포넌트로부터 받은 message출력
    </div>
  );
}

// 부모 컴포넌트
function App() { // Greeting 컴포넌트에 name과 message값을 props로 전달한다.
  return (
    <div>
      <Greeting name="홍길동" message="오늘도 좋은 하루 되세요!" />
    </div>
  );
}

export default App;

 

이 코드는 App컴포넌트가 있고 그 안에 Greeting컴포넌트를 사용하고 있다.

Greeting 컴포넌트 안에 name, message라는 속성을 넣었다. 이 속성 값이 Greeting 컴포넌트에 Props로 전달되고 자바스크립트 객체가 된다.

 

이 처럼 props를 이용하면 부모에서 자식에게 데이터를 손쉽게 전달 할 수 있다.