5. Components and Props - Props의 특징 및 사용법

Props

Read-Only :

읽을 수만 있다 -> 값을 변경 할 수 없다

즉, props를 전달한 후에 Element를 변경하는 것은 만들고 있던 붕어빵의 속을 가르는 행위이다..!

때문에 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성해야 한다

JavaScript함수의 속성

• 'Pure' :
  - 입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴

 	function sum(a, b) {
      return a+b;
    } // 인자의 값이 변경되지 않는 순수한 함수

• 'Impure'
  - 입력값(input)을 변경

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

!갑자기 JavaScirpt함수의 pure개념이 나온 이유

'All React components must act like pure functions with respect to their props.'

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

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

Props 사용법

JXS 사용시

	function App(props) { // App 컴포넌트
    	return (
        	<Profile // Profile 컴포넌트
        		name = "페라리"
        		introduction = "부아앙~!"
        		viewCount={1500} // 정수, 변수, 다른 컴포넌트 입력 시 {}로 묶어주어야 한다.
			/>
	  	);
	}

JSX 없이 작성 시

React.createElement(
  Profile,
  {
    name : "페라리",
    introduction : "부아앙~!",
    viewCount : 1500
  },
  null
);

Profile 컴포넌트의 Props속성에 전달

{
	name = "페라리"
	introduction = "부아앙~!"
	viewCount={1500} 
}

ex) JSX를 사용하여 Props에 컴포넌트 넣기

function App(props) {
  return (
    <Layout
    	width = {2560}
		height = {1440}
		header={
          <Header title="페라리를 타는 백엔드 개발자입니다." />
        }
		footer={
          	<Footer />
        }
	/>
   );
}