[React] Component 와 Props 의 정의

1. Component

JavaScript function 처럼 React Component도 입력값을 받아 출력합니다.

Javascript의 function과 약간의 차이점이 있지만, 입력과 출력의 가운데에 있다는 점을 기억해주시면 됩니다.

React Component의 입력은 Props 이고, 출력은 React Element 입니다.

 

 

 

2. Props

- Properties(속성)이라는 단어의 줄임말

- Props는 Components에 전달할 다양한 정보를 담고있는 JavaScript 객체

- Props는 읽기전용(Readonly)

- 모든 React Component는 Props를 직접 바꿀수없고, 같은 Props에 대해서는 항상 같은 결과(React Element)를 보여줘야 한다.

 

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

 

Props 사용법

// JSX 사용
functino App(props) {
    return(
        <Layout
            width={1920}
            height={1280}
            header={
            	<Header title="Hi, Welcome to My home" />
            }
            footer={
                <Footer />
            }
        />
    );
}

//JSX 사용 X
React.createElement(
    Layout,
    {
        width: 1920
        height: 1280
        header: <Header title="Hi, Welcome to My home" />
        footer: <Footer />
    },
    null
);