[리액트] React 웹 개발 - 5

Props

리액트 컴포넌트의 속성을 지정하는 방법

<Dice color="blue" />

이런 식으로 리액트 컴포넌트에 html 속성을 지정하듯이 속성을 추가하면

 

웹페이지를 통해서 확인해봤을 때 html 구조 상 속성으로 추가되지 않고 리액트 개발자 도구에서 props에 추가가 된다.

 

리액트에서 컴포넌트에 지정한 속성을 props라고 한다.

props는 properties의 줄임말로 생각하면 된다.

props는 컴포넌트에 전달된 속성을 모두 가리키기 때문에 각각의 속성은 prop으로 부른다는 점도 참고하면 좋다.

 

prop으로 컴포넌트에 지정한 속성은 하나의 객체 형태로 컴포넌트 함수의 첫번째 파라미터로 전달된다.

 

import diceBlue01 from './assets/dice-blue-1.svg';
import diceRed01 from './assets/dice-red-1.svg';

function Dice(props) {
	const diceImg = props.color === 'red' ? diceRed01 : diceBlue01;
    return <img src={diceImg} alt="주사위" />;
}

export default Dice;

Dice의 color prop이 red인 경우에는 diceImg 변수에 import로 불러온 diceRed01 이미지를,

아닌 경우에는 diceBlue01 이미지로 src 경로가 바뀌도록 할 수 있다.

prop으로 컴포넌트에 전달한 속성 값에 따라 render 되는 모습을 다양하게 변경할 수 있다.