Props에 대하여 (리액트)

1. 개요

여기서는 Props의 특징과 사용법에 대하여 알아보겠다. 

2. Props의 특징 

Props의 가장 중요한 특징은 READ_ONLY 라는 특징이다. 읽기 밖에 못한다라는 말은 다시 말해 "값을 변경할 수 없다."라는 의미이기도 하다. 저번 포스팅에서 컴포넌트를 붕어빵 틀, 거기서 나온 Elements를 붕어빵, Props를 붕어빵 속 재료로 표현했는데, 이미 만들어진 붕어빵 속 재료를 바꿀 수 없는 것과 같은 이치이다. 만약 사용자 입력으로 새로운 화면을 그려야 한다면, 새로운 Props를 만들어 컴포넌트에 넣고 새로운 Elements를 Re-Rendering 하여 화면에 띄워야 한다. 그러니까, 새로운 붕어빵이 먹고 싶으면 손에 쥔 붕어빵을 버리고 새로 구워달라 해야한다는 것이다. 

  이 특징을 컴포넌트와 엮어서 더 구체적으로 설명해야할 거 같다. 그 전에 먼저 JavaScript의 함수 종류에 대해서 자세히 알아보고 가자. 

왜?

일단 알아보자. 

ⓐ JavaScript 함수의 종류: pure 함수와 Impure 함수 

⒜ Pure 함수 

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

해당 함수는 입력값을 바꾸지 않으면 같은 입력에 대해서는 항상 같은 결과를 반환한다. 이처럼 입력값이 변경되지 않고, 같은 입력에 대해서 항상 같은 결과가 나오는 함수를 PURE 함수라고 한다. 

⒝ Impure 함수 

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

해당 함수는 계좌에서 출금하는 모습을 구현한 것이다. 계좌 총 용량에서 amount 값 만큼 값을 뺀다. 해당 함수는 입력 값에 대한 변경이 이루어지고, 같은 입력에 대해서 다른 결과를 출력할 가능성이 높다. 왜냐하면, amount가 0이 아닌 이상, account.total 값은 해당 함수를 진행할 때마다 달라지기 때문이다. 이처럼 입력값에 영향을 주고, 같은 입력에 대해서 다른 결과가 나올 수 있는 함수를 IMPURE 함수라고 한다. 

오, 근데 이거 왜 알아봤는데?

이는 Component에서 Props를 어떻게 다뤄야 하는지에 대해 더 자세히 설명하기 위한 사전 지식이다. 

ⓑ 컴포넌트와 Props에 관계

React 공식 문서에서는 다음과 같이 Props와 컴포넌트의 관계를 설명한다. 

모든 리액트 컴포넌트에 관하여, 컴포넌트와 그들의 Props의 관계는 Pure 함수와 입력값의 관계여야 한다.

이는 다음과 같이 풀어 설명할 수 있다. 

모든 컴포넌트의 Props 값은 변경되면 안되며, 같은 Props 입력에 관하여 항상 같은 결과를 보여줘야 한다! 

라는 것이다. 팥 심은데 팥나고 콩 심은데는 무조건 콩이 나야 하는 것이다. 

 

2. Props의 사용법  

Props는 컴포넌트에게 입력같은 녀석인데, 값이 실제 컴포넌트로 들어오는 형태가 일반적인 입력에 비해서 복잡하다. 과정을 설명하면

일단 첫째, 부모 컴포넌트에서 자식 컴포넌트는 마치 태그 처럼 보인다. 그래서 태그 속성에 값 넣듯이 props가 될 값들을 넣는다. 입력값이 일반적인 문자열 혹은 숫자이면 ""를 써도 되고, {}를 써도 된다. 

function App (props) {
	return (
    	<Profile
        	name="소플"
            count={1500}
    	/>
    )
}

둘째, Props는 해당 값들을 받아서 속성: 값 형태의 JSON으로 변환한다. 위의 Profile의 Props를 들여다 보면 다음과 같을 것이다. 

{
 name: "소플",
 count: 1500
}

 

셋째, 이제 진짜 본 컴포넌트 레벨로 가면 해당 Props의 값들을 점표기법으로 꺼내쓰면 된다.

const Profile = (props) => {
	console.log(props.name);
    console.log(props.count);
}

ⓐ 복잡한 예시

알다시피 props 값으로 문자열이나 숫자만 들어가지 않는다. 때때로 다른 컴포넌트가 들어가는 경우도 있다. 이러한 경우 어떻게 하는지 알아보자. 만약 Props로 컴포넌트 값이 들어올 경우, 무조건 속성이름 = { 컴포넌트} 형태로 들어가야 한다. 

위의 예시에서 Header와 footer를 보면, 컴포넌트를 props의 값으로 넣었음을 알 수 있다. 다음 2,3번 과정은 같다. 해당 컴포넌트를 꺼내서 본 컴포넌트에서 쓰고 싶다면, props.header 나 props.footer라고 불러서 쓰면 된다.