1. Props

1-1. Props란

• Props는 속성을 나타내며 한 구성 요소에서 다른 요소로 데이터를 전달하는데 사용 (Props : Properties)
• Props가 있는 데이터가 단방향 흐름으로 전달 된다는 것 입니다.(부모에서 자녀로의 편도)
• Props를 통해 부모 컴포넌트부터 자식 컴포넌트에게 state의 상태 값,event handler를 넘겨줄 수 있습니다.
• Props는 함수 인자와 같은 Component에 전달됩니다.

컴포넌트는 내가 받는 인자에 따라서 언제나 동일한 값을 반환해야 합니다
그렇게 되기 위해서는 Props가 변경되지 않아야 합니다. Props는 읽기 전용이 되어야 합니다 .

function sum(a, b) {
	return a + b;
}

위 함수와 같이 인자값은 언제나 같은 값이 리턴합니다.
컴포넌트도 마찬가지입니다. 언제나 동일한 입력에 대한 동일한 결과를 반환합니다.
하지만 Props값이 변경해야 할 때는 다른 어디선가 Props를 변경하고 Component를 호출하면 됩니다.

1-2. Props 사용 예시

const ChildComponent = () => {
	return <p>I'm the child component.
}
Class ParentComponent extends Component {
	render() {
    	return (
        	<h1>
            	I'm the parent component.
                <ChildComponent />
                </h1>
        );
    }
}

결과 값 - I'm the parent component.
	 I'm the child component.

우리가 해야하고 좋아하는 것은 동적출력을 얻는 것입니다.
child component가 서로 다른 데이터를 가질 수 있기 때문에 Props를 사용하여 살펴 보겠습니다.

1단계: 속성 및 데이터 정의

우리는 HTML 태그에 속성과 값을 할당 할 수 있다는 것을 알고 있습니다.

<a href="www.google.com">Google을 방문하려면 여기를 클릭하세요</a>

React 컴포넌트에 똑같이 할 수 있습니다. 속성을 정의하고 값을 할당 할 수 있습니다.

ChildCompoenent someAttribute = {value} anotherAttribute = {value}

ChildComponent에 "text"속성을 선언 한 다음 문자열 값을 할당합니다.

<ChildComponent text = {"I'm the first child"}>

ChildComponent에는 속성과 값이 있습니다. 다음으로 Props를 통해 전달해야 합니다.

2단계: Props를 사용하여 데이터 전달

Props는 간단합니다. 함수에 인자를 전달하는 것처럼 Props를 React component에 전달하고 Props는 필요한 모든 데이터를 가져옵니다.

const ChildComponent = (props) => {
	return <p> 나는 첫 번째 자식입니다. </p>
};

Props는 React 컴포넌트로 전달되는 인자입니다.