[React] Component, Props 정의와 Props 사용법

Component and Props

1. Components

• React ⏩ Component-Based
• 레그 블록 조립하듯, 컴포넌트들을 모아서 개발
• 예 ) Air-bnb : 컴포넌트를 여러번, 반복적으로 사용해서 하나의 페이지 구성
  

 

 

• Props(입력) ⏩ React component ⏩ React element(출력)
  • 기본적으로 JavaScript 함수와 비슷한 로직. 
  • 어떠한 속성들(Props)를 입력으로 받아서, 그에 맞는 React element들을 생성, 반환한다.

• Component - Element
  • 붕어빵틀(Component)과 붕어빵(Element)의 관계
  • 객체지향 프로그래밍에서, 클래스와 인스턴스와 비슷

 

2-0. Props

---

컴포넌트에 전달할 다양한 정보를 담고있는 자바스크립트 객체

• Property : 속성 ⏩ Property of Components
• '붕어빵틀-붕어빵 비유'에서, 붕어빵에 들어가는 재료를 의미

 

특징

Read-Only : 읽기 전용 → 값을 변경할 수 없다.

• Element를 생성하는 도중에 변경될 수 없다.
  → 붕어빵을 굽고 있는데, 속재료를 바꿀 수 없듯

Summary

다른 props의 값으로 Element를 생성하기 위해선,
✅ 새로운 값을 Component에 전달하여 Element를 생성해야 한다.

 

Pure VS. Impure

---

Pure

• 입력값을 변경하지 않으며,
• 같은 입력값에 대해서는 항상 같은 출력값을 리턴

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

 

Impure

• 입력값을 변경 → 입력으로 받은 account 값을 변경

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

All React components must act like pure functions with respect to their props.
모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수같은 역할을 해야 한다.

[리액트 공식문서]

 

Summary

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고,
같은 Props에 대해서는 항상 같은 결과를 보여준다.
✅ 같은 Props에 대해선 같은 React Element 리턴

 

2-1. Props의 사용법

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

• {} : 자바스크립트 코드가 들어간다. → 문자열 외에 정수, 변수, 다른 컴포넌트 등
• Props의 값(value)들이 Profile 컴포넌트에 전달,
• 자바스크립트 객체가 된다. 

// 📌예제1-2. 예제1-1의 props 객체
props = { name: "소플", introduction: "안녕하세요, 소플입니다." viewCount: 1500 }

 

CASE. 속성값으로 Component를 넣은 경우

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

 

JSX를 사용하지 않을 경우, 어떻게 Props를 넣어줘야 할까?

✅ createElement()사용

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

 

---

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션5. Components and Props
• 리액트 공식문서