Props의 특징 및 사용법 [처음 만난 리액트 #16]

5강. Components and Props

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

---

Props의 특징

Read-Only 읽기 전용

= 값을 변경할 수 없다

 

● props의 값은 리액트 컴포넌트가 element를 생성하기 위해서 사용하는 값

● 이 값들이 element를 생성하는 도중에 갑자기 바뀌어버리면 제대로 된 element를 생성할 수 없음

● 마치 붕어빵이 다 구워졌는데, 속재료를 바꿀 수 없는 것과 마찬가지

그럼 다른 props의 값으로 element를 생성하려면?

새로운 값을 컴포넌트에 전달하여 새로 Element를 생성

이 과정에서 element가 다시 렌더링 됨

 

---

JavaScript 함수의 속성

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

 

▲ sum 함수 

: a와 b 두 개의 파라미터를 받아서 둘의 합을 리턴하는 함수

 

이 함수에서는 a와 b라는 파라미터의 값을 변경하지 않고,

a, b 파라미터 집합의 값이 같은 경우에는 항상 같은 값을 리턴

=> 이러한 함수를 'Pure'하다고 함 : 입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴

 

 

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

 

▲ withdraw 함수

: account와 amount라는 파라미터를 받아서 account의 total이라는 값에서 amount를 빼는 함수 

  은행 계좌 정보와 총액을 파라미터로 받아서 계좌에 현재 총 잔액을 나타내는 total에서 출금할 금액인 amount를 빼는 것

 

이 함수의 경우 입력으로 받은 파라미터 account의 값을 변경했기 때문에 'Inpure'하다고 함 

 

 

---

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

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

 

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

 

리액트 컴포넌트는 자바스크립트의 함수와 같은 개념

리액트 컴포넌트의 입력으로 들어오는 props는 자바스크립트 함수의 파라미터와 같음

● 함수가 pure하다는 것은 함수의 입력값인 파라미터를 바꿀 수 없다는 의미를 포함하고 있기 때문에 리액트 컴포넌트에서는 props를 바꿀 수 없음 

● pure 함수는 같은 입력값에 대해서는 항상 같은 결과를 보여줘야 하기 때문에 리액트 컴포넌트 입장에서 같은 props에 대해서는 항상 같은 결과(React Element)를 보여주어야 함 

 

---

Props 사용법

- JSX를 사용하는 경우

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

 

● JSX를 사용하는 경우 위 코드와 같이 키와 값으로 이루어진 키=값 쌍의 형태로 컴포넌트에 props를 넣을 수 있음

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

● Profile 컴포넌트에 name, introduction, viewCount라는 세 가지 속성을 넣어줌

 

- 각 속성의 값을 넣을 때 중괄호를 사용한 것과 안 사용한 것의 차이

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

JSX에서 중괄호를 사용하면 무조건 자바스크립트 코드가 들어감 -> props에 값을 넣을 때에도 문자열 이외의 정수, 변수, 다른 컴포넌트 등이 들어갈 경우에는 중괄호로 감싸주어야 함 

 

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

 

▲ props는 위와 같은 자바스크립트 객체가 됨 

 

---

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

 

▲ props의 중괄호를 사용해서 위와 같이 props의 값으로 컴포넌트도 넣을수도 있음 

 

Layout 컴포넌트의 props로는 정수값을 가진 width, height와 리액트 element로 header, footer가 들어오게 됨

 

---

- JSX를 사용하지 않는 경우

리액트의 createElement 함수

 

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

 

createElement 함수의 두 번째 파라미터가 props

두 번째 파라미터에 자바스크립트 객체를 넣으면 해당 컴포넌트의 props가 됨 

 

React.createElement(
    Profile,
    {
        name: "소플"
        introduction: "안녕하세요, 소플입니다."
        viewCount: 1500
    },
    null
);

 

▲ Profile 컴포넌트를 JSX를 사용하지 않고 작성한 코드

 

type은 컴포넌트 이름인 Profile이 들어가고, props로 자바스크립트 객체, children에는 null (하위 컴포넌트가 없기 때문)