[React] Props의 특징

⭐ Read Only

: 읽기 전용 -> 값을 변경할 수 없다.

다른 Props의 값으로 엘리먼트를 생성하기 위해선?
-> 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성

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

---

🟩 Props 사용법

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

컴포넌트에 Props라는 객체를 전달하기 위해선 어떻게 해야 하나?

1. JSX를 사용하는 경우

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

name과 introduction에는 중괄호를 사용하지 않았고, viewCount에는 중괄호를 사용해 입렸했다.

props에 값을 넣을때 문자열 이외에 정수, 변수, 다른 컴포넌트 등이 들어갈때는 중괄호로 감싸주어야 하기 때문이다.

이 속성의 값들이 모두 Profie 컴포넌트에 props로 전달되며 아래와 같은 자바스크립트 객체가 된다.

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

❕ 중괄호를 사용해 다음과 같이 props의 값으로 컴포넌트도 넣을 수 있다.
ㅤ

function App(props) {
    return (
        <Layout
            width={2560}
            height={1440}
            header={
                <Header title="리액트 연습중입니다." />
            }
            footer={
                <Footer />
            }
        />
    );
}

이렇게 하면 레이아웃 컴포넌트의 props는 정수값을 가진 width, height, 리액트 엘리먼트로 header, footer가 들어온다.

✔ 이와 같이 JSX를 사용하면 간단하게 컴포넌트에 프롭스르 넣을 수 있다.

2. JSX를 사용하지 않는 경우

리액트의 createElement를 사용!

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

두번째 파라미터인 props에 자바스크립트 객체를 넣으면 그게 곧 해당 컴포넌트의 props가 된다.

React.createElement(
    Profile,
    {
        name: "벨라",
        introduction: "안녕하세요, 벨라입니다.",
        viewCount: 1500
    }
)

위에서 작성한 Profile 컴포넌트를 JSX를 사용하지 않고 작성한 코드이다.

📍 리액트를 개발할땐 보통 JSX를 사용함으로 이 코드는 참고만 하자!