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는 읽기 전용이다. 해당 값을 변경하려고 하면 오류가 발생한다.
참고
W3C School - React – React Props