[React] Components and Props

 

• Component

 : 작은 component 들이 모여서 하나의 component 를 구성하고 그것들이 전체 페이지를 구성한다.

React component 는 만들고자 하는 대로 props(속성)을 넣으면 해당 props 에 맞춰 화면에 나타날 element 를 만들어준다.

 

 

• Props

: Property 의 줄임말로 React Component 의 속성을 나타낸다. Component 에 전달할 다양한 정보를 담고 잇는 자바스크립트 객체이다.

눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용한다.

 

 

✔ Props 의 특징

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

 다른 Props 의 값으로 elements 를 생성하려면 새로운 값을 컴포넌트에 전달하여 새로 Element  를 생성하면 된다.

 

모든 React Component 는 그들의 Props 에 관해서는 Pure 함수 같은 역할을 해야 한다.

-> 모든 React Component 는 Props 를 직접 바꿀 수 없고, 같은 Props 에 대해서는 항상 같은 결과를 보여줄 것

 

 

✔ Props 의 사용법

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

 JSX 코드를 사용하는 경우에는 위와 같이 키-값 쌍으로 이루어진 형태로 Component 에 Props 를 넣을 수 있다.

위 Profile Component 에 name, introduction, viewCount 세가지 속성을 넣었다. 각 속성에 값을 넣을 때 중괄호를 사용하는 경우는 문자열 이외에 정수, 변수, 다른 Component 등이 들어갈 때이다.

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

Props 는 이와 같은 형태의 JavaScript 객체가 된다.

 

function App(props) {
	return (
    	<Layout
            width={2560}
            height={1440}
            header={
            	<Header title="안녕" />
            }
            footer={
            	<Footer />
            }
        />
    );
}

props 에 중괄호를 넣어서 위와 같이 props 의 값으로 component 도 넣을 수 있다.