[React] state & props 2 (What is props?)

Props 의 특징

컴포넌트의 속성을 의미한다.
외부로부터 전달 받은 변하지 않는 값이다.

부모 컴포넌트로부터 전달 받은 값

리액트의 컴포넌트는 JavaScript의 함수와 클래스로 props를 함수의 전달인자(argument)처럼 전달 받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 REACT 엘리먼트를 리턴한다.
화면에 출력하고자 하는 데이터를 초깃값으로 사용할 수 있다.

 

객체(Object)타입이다.

어떤 타입의 값이라도 props로 전달할 수 있도록 props는 객체의 형태이다.

 

props는 읽기 전용이다.

외부에서 전달한 바꿀 수 없는 값이기 때문에 props는 읽기 전용 객체다.

 

Props의 사용법

props를 사용법 3단계

 

1. (하위 컴포넌트로)전달하고 싶은 값과 속성을 정의한다.

 

2. props를 이용하여 정의된 값과 속성을 전달한다. (하위 컴포넌트로)

 

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

 

이 단계에 맞춰 props를 전달할 때 <Parent>  와 <Child>라는 컴포넌트를 생성한다.

 그 후 <Parent> 라는 컴포넌트 안에 <Child>라는 컴포넌트를 넣는다.

 

function Parent() {
	return (
    <div className = 'Parent'>
    	<h1>I am the Parent</h1>
        <Child />
    </div>
    );
};

function Child() {
	return (
    <div className = 'Child'>
    </div>
    )
}

[code] Parent와 Child Component의 선언