Props 의 특징

Props 의 중요한 특징은 Read-Only, 읽기 전용 이라는 것이다.

읽기 전용이라는 말은 값을 변경 할 수 없다는 것이다.

Props 의 값은 리액트 컴포넌트가 element 를 생성하기 위해서 사용하는 값이다.

그런데 이 값들이 element 를 생성하는 도중에 바뀌어 버리면 제대로 된 element 가 생성될 수 없을 것이다.

 

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

이럴 때는 새로운 값을 컴포넌트에 전달하여 새로 element 를 생성하면 된다. (이 과정에서 element 가 새로 렌더링)

---

여기서 잠시 자바스크립트 함수의 속성에 대해 짚고 넘어가자

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

이 sum() 이라는 함수는 a 와 b 라는 두 개의 인자를 받아서 둘의 합을 리턴하는 함수이다.

이 함수에서는 a 와 b 라는 함수의 값을 변경하지 않고 있다.

그리고 a 와 b 라는 인자의 값이 같은 경우에는 항상 같은 값을 리턴할 것이다.

우리는 이러한 함수를 'Pure 하다' 라고 한다. 말 그대로 함수가 순수하다는 뜻인데,

이 말은 입력값(input)을 변경하지 않으며 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴한다는 의미이다.

 

그렇다면 함수가 Pure 하지 않은 경우도 살펴보자

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

이 함수는 account 와 amount 라는 인자를 받아 account 의 total 이라는 값에서 amount 를 빼는 함수이다.

쉽게 이야기하면 계좌에서 출금을 하는 함수인데,

은행 계좌정보와 총액을 인자로 받은 다음 나의 현재 잔액을 나타내는 total 에서 출금할 금액인 amount 를 빼는 것이다.

여기에서 이 함수는 입력(input)으로 받은 인자 account 의 값을 변경한 것이다.

이런 경우를 우리는 'Impure 하다' 라고 한다.

---

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

 

이것은 리액트 공식문서에서 컴포넌트에 대해 설명한 문장이다.

좀더 쉽게 풀어보면 아래와 같은 의미이다.

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

 

위에서 리액트 컴포넌트가 자바스크립트의 함수와 같은 개념이라고 설명했었는데,

그렇기 때문에 리액트 컴포넌트의 입력으로 들어오는 Props 는 자바스크립트 함수의 인자와 같다.

함수가 Pure 하다는 것은 함수의 입력값인 인자를 바꿀 수 없다는 의미를 포함하고 있기 때문에

리액트 컴포넌트에서는 Props 를 바꿀 수 없다는 의미가 된다.

그리고 Pure 함수는 같은 입력값에 대해서는 항상 같은 결과를 보여줘야 하기 때문에,

리액트 컴포넌트의 관점에서 같은 Props 에 대해서 항상 같은 결과를 보여줘야 한다는 의미가 된다.

이때 결과는 리액트의 element 가 된다.

 

간단하게 정리하면 리액트 컴포넌트의 Props 는 바꿀 수 없고,

같은 Props 가 들어오면 항상 같은 element 를 리턴해야 한다고 기억하면 된다.

---

그렇다면 Props 는 어떻게 사용할까?

 

앞에서 Props 가 컴포넌트에 전달할 다양한 정보를 담고있는 자바스크립트 객체라고 설명했다.

그렇다면 컴포넌트에 Props 라는 객체를 전달하기 위해서는 어떻게 해야할지 살펴보자

 

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

먼저 jsx 를 사용하는 경우에는 위의 코드처럼 키와 값으로 이루어진 키-값 쌍의 형태로 컴포넌트에 Props 를 넣을 수 있다.

이 코드에는 App 컴포넌트가 나오고 그 안에서 Profile 컴포넌트를 사용하고 있다. 

이때 Profile 컴포넌트에 name, introduction, viewCount 라는 세 가지 속성을 넣어줬다.

 

여기서 한 가지 눈여겨볼 점은 각 속성에 값을 넣을 때, 중괄호를 사용한 것과 사용하지 않은 것의 차이이다.

name 과 introduction 에 들어간 문자는 중괄호를 사용하지 않고, viewCount 에 들어간 정수는 중괄호를 사용했다.

이전에 jsx 코드에 대해 정리할 때, 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다고 했었는데

마찬가지로 Props 에 값을 넣을 때도 문자열 이외의 정수, 변수, 이외의 컴포넌트 등이 들어갈 경우에는

중괄호를 사용하여 감싸줘야 한다. (물론 문자열도 중괄호로 감싸줘도 상관없다.)

 

이렇게 하면 이 속성의 값들이 모두 Profile 컴포넌트에 Props 로 전달되며,

Props 는 이와 같은 형태의 자바스크립트 객체가 된다.

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

 

그리고 Props 에 중괄호를 사용해서, 다음과 같이 props 의 값으로 컴포넌트도 넣을 수 있다.

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

이렇게 하면 Layout 컴포넌트의 Props 로는 정수값을 가진 width, height 와

리액트 element 로 Header, Footer 가 들어오게 된다.

 

이처럼 jsx 를 사용하는 경우에는 간단하게 컴포넌트에 Props 를 넣을 수 있다.

그렇다면 jsx 를 사용하지 않는 경우에는 어떻게 Props 를 넣어줘야 할까?

이전에 리액트 element 에 대해 정리할때, 아래와 같은 형태로 사용하는 리액트의 createElement() 함수에 대해 정리했다.

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

여기서 두 번째 인자가 바로 Props 이다. 

여기에 자바스크립트 객체를 넣으면, 그게 바로 해당 컴포넌트의 Props 가 된다.

 

앞에서 나왔던 Profile 컴포넌트를 jsx 를 사용하지 않고 작성하면 다음과 같이 될것이다.

React.createELement(
	Profile,
        {
            name: "블로그",
            introduction: "안녕하세요, 블로그입니다.",
            viewCount: 1500
        },
        null
);

 type 은 컴포넌트의 이름인 Profile 이 들어가고, Props 로는 자바스크립트 객체가 들어갔다.

그리고 마지막으로는 하위 컴포넌트가 없기 때문에 children 에는 null 이 들어갔다.

리액트를 개발할 때는 무조건 jsx 를 사용하는 것이 좋기 때문에 이 코드는 참고만 하면 된다.

 

 

 

정리참고

https://www.youtube.com/watch?v=OZ9nv6QrkZA&list=PLo3AHtncM26y0qX58gjc_QrkYlBCzQ2R_&index=17