Props 특징

---

1. Read-Only

Props는 read-only, 즉 값을 변경할 수 없다. element가 생성되는 도중에 바뀌어버리면 제대로된 element가 생성될 수 없을 것이다.

다른 Props의 값으로 element를 생성하려면 어떻게 해야할까?

새로운 값을 컴포넌트에 전달해서 새로 Element를 생성하면 된다. 이 과정에서 element가 다시 렌더링된다.

여기서 잠깐!!! 자바스크립트 함수의 속성

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

위 sum 함수에서는 a, b라는 파라미터의 값을 변경하고 있지 않다. 그리고 같은 a와 b를 넣고 돌리면 계속 같은 값이 나올 것이다. 이런 함수를 순수함수라고 한다.

function withdraw(account, amount) {
	account.total -= amount;
}

입력값이 계속 변경되는 위 함수는 비순수함수이다.

2. 모든 리액트 컴포넌트는 그들의 Props에 관해서는 순수함수같은 역할을 해야 한다.

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Propps에 대해서는 항상 같은 결과를 보여줘야 한다!!!

Props 사용법

---

✔ 개념 복습 : Props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다.

그렇다면 컴포넌트에 Props라는 객체를 전달하려면 어떻게 해야 할까?

방법 1. 컴포넌트에 Props 넣기(key: value)

function App(props) {
	return (
    	<Profile 
        	name="짱구"
          	introduction="안녕하세요, 짱구입니다."
          	viewCount={1500}
        />
    );
}

JSX를 사용하는 경우 위 코드와 같이 키와 값으로 이루어진 키값 쌍의 형태로 컴포넌트에 Props를 넣어줄 수 있다.
이 코드에는 App 컴포넌트가 나오고 그 안에서 Profile 컴포넌트를 사용하고 있다. 여기서 Profile 컴포넌트의 name, introduction, viewCount라는 세 가지 속성들을 넣어줬다.

중요한 점은 각 속성의 값을 넣을 때 중괄호를 사용한 것과 사용하지 않은 것의 차이이다. 앞서 중괄호를 사용하면 자바스크립트 코드가 들어간다고 배웠는데 마찬가지로 문자열 이외에 정수, 변수, 다른 컴포넌트 등이 들어갈 경우 중괄호를 사용해서 감싸줘야 한다. (문자열도 중괄호로 감싸줘도 상관 없다)

1-1. Props 확인

{
	name: "짱구",
    introduction: "안녕하세요, 짱구입니다.",
    viewCount: 1500
}

이렇게 하면 모든 Props들이 컴포넌트로 전달되고 Props는 위와 같은 형태의 자바스크립트 객체가 된다.

2. Props 안에 컴포넌트 넣기

중괄호를 사용해서 Props의 값으로 컴포넌트도 넣을 수 있다

function App() {
	return (
    	<Layout
        	width={2560}
          	height={1440}
          	header={<Header title="짱구의 블로그입니다." />}
          	footer={<Footer />}
        />
    );
}

이렇게 하면 Layout 컴포넌트의 Props로는 정수값을 갖는 width, height와 리액트 element로 header, footer가 들어오게 된다.
이처럼 JSX를 사용하는 경우에 간단하게 컴포넌트에 Props를 넣을 수 있다.

방법 2. JSX를 안쓰고도 컴포넌트에 Props를 넣을 수 있다!

React.createElement(
	type,
  	[props],
  	[...children]
)

createElement함수의 Props에 자바스크립트 객체를 넣으면 그게 곧 해당 컴포넌트의 Props가 된다.