여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - Props
React – Props
10개월전 작성
11개월전 수정

React

Props

Props는 React 컴포넌트에 전달되는 인수다.

Props는 HTML 속성을 통해 구성 요소에 전달된다.

⭐ props는 속성을 의미한다.

React Props

React Props는 JavaScript의 함수 인수 및 HTML의 속성 과 같다.

props를 구성 요소로 보내려면 HTML 속성과 동일한 구문을 사용하자.

예제

Car 요소에 “brand” 속성을 추가한다.

const myElement = <Car brand="Ford" />;

 

구성요소는 인수를 props객체로 받는다.

예제

구성요소에서 brand 속성을 사용한다.

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}
기본 예시
예제 보기

데이터 전달

Props는 한 컴포넌트에서 다른 컴포넌트로 데이터를 매개변수로 전달하는 방법이기도 하다.

예제 1

Garage 구성 요소의 “brand” 속성을 Car 구성 요소로 보낸다.

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
기본 예시
예제 보기

 

문자열이 아닌 전송할 변수가 있는 경우 중괄호 안에 변수 이름을 입력하면 된다.

예제 2

carName이라는 변수를 생성하여 Car 구성 요소로 보낸다.

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  const carName = "Ford";
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carName } />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
기본 예시
예제 보기
예제 3
function Car(props) {
  return <h2>I am a { props.brand.model }!</h2>;
}

function Garage() {
  const carInfo = { name: "Ford", model: "Mustang" };
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carInfo } />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
기본 예시
예제 보기

 

⭐ React Props는 읽기 전용이다. 해당 값을 변경하려고 하면 오류가 발생한다.

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그