[React] 리액트 컴포넌트의 속성 Props

react 컴포넌트는 states(상태) 와 props (속성)을 가질 수 있다.

 

Props

props 는 변하지않는 외부로부터 전달받은 속성을 의미한다.

 

성별, 이름과같이 변하지 않는 속성에 해당하며 부모 컴포넌트로부터 전달받은 값이다.

리액트는 단방향, 하향식의 데이터 흐름을 지향하는데 이에 맞게 Props는 함부로 변경될 수 없는 읽기전용 객체이다.

 

Props 를 전달하는 방법

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.

2. props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 props를 렌더링한다.

function Article(props){
	return(
    	<div>
    		<h1>{props.title}</h1>
        	<p>{props.contents}</p>
    	</div>
    )
}


function App(){
	return(
    	<Article title="안녕" contents="props test" />
    )
}

 

Props로 값이 전달

Props를 이용하면 반복적으로 사용되는 컴포넌트에 특정 속성을 부여해줄 수 있어서, 컴포넌트의 재사용성을 높일 수 있다.