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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기