React - props

props

propertys의 약자로 React에서 Component의 속성을 의미한다.

 

이전 포스팅에서 이야기 했던 붕어빵이야기를 다시하자면

Component는 붕어빵 틀이고 Element는 만들어진 붕어빵과 같다고 했다.

 

그럼 여기서 props는 붕어빵의 속재료와 같다. 같은 붕어빵 틀에서 만들어졌더라 하더라도

안에 슈크림을 넣을지 팥을 넣을지에 따라 붕어빵이 달라지는 것처럼

 

Compoent를 통해서 만들어진 Element도 props에 따라서 틀은 같지만 내용은 다른 것들이 만들어지는 것이다.

 

 

이렇듯 props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체를 의미한다.

 

 

props 특징

1. read-only : 값을 변경할 수 없다.

붕어빵이 다구워졌는데 속재료를 바꿀 수 없는 것과 마찬가지로 다른 props로 element를 생성하고자 한다면

새로운 값을 컴포넌트에 전달하여 element를 새로 만들어야 한다.

 

2. 모든 리액트 컴포넌트의 Props는 pure 함수 같은 역할을 해야한다.

 

 Pure 함수라는 것은 입력값을 변경하지 않으며 같은 입력값에 대해서는 항상 같은 출력값을 리턴하는 함수를 말한다.

 

pure function 

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

입력값 a,b가 변경되지 않았기에 pure function

impure function 

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

amount로 account의 값을 변경(입력값을 변경) 했기 때문에 impure function

 

 

Props 사용법

예시1)

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

위 코드를 보면 App 이라는 컴포넌트안에서 Profile이라는 컴포넌트를 사용하고 있다.

Profile 컴포넌트는 name, introduction, viewCount 3가지 props를 사용하고 있는데 

중괄호를 사용한 props와 그렇지 않은 코드가 있다.

 

JSX는 중괄호를 사용하면 자바스크립트로 취급하는데 문자열 이외에 정수, 변수 또는 다른 컴포넌트를 props로 사용하고 싶다면 중괄호로 감싸주는 것이다. 물론 문자열도 중괄호로 감싸주어도 상관없다.

 

이렇게 작성하면 Profile 컴포넌트에 해당 3가지 props가 전달되며 

props는 아래와 같은 자바스크립트 객체가 된다.

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

 

예시2)

function App(props){
	return(
    	<Layout
        	width={2500}
            height={1400}
            header = {
            	<Header title="seeyou 입니다."/>
            }
            footer = {
            	<Footer />
            }
        />
    );
}

위 코드와 같이 다른 컴포넌트를 props로 사용할 수 있고 이때는 중괄호로 감싸주어야한다.

 

 

예시3) JSX를 사용하지 않고 작성하는법

React.createElement(
	Profile, //type
    { //props
    	name : "seeyou",
        introduction : "안녕하세요, seeyou입니다.",
        viewCount : 1500
    },
    null // children
);