React - Component 와 props

리액트는 컴포넌트 기반(Conponent-Based)이다.
리액트에서는 모든 페이지가 컴포넌트로 구성되어있고, 하나의 컴포넌트는 또 다른 여러 컴포넌트의 조합으로 구성될 수 있다. 그리고 이런 컴포넌트들을 마치 레고블록 조립하듯 끼워맞춰서 새로운 컴포넌트를 만들 수 있는것이다. 

리액트 컴포넌트에서의 입력은 props고, 출력은 React Element가 된다. 결국 리액트 컴포넌트가 하는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 Element를 생성하여 리턴해주는 것이다.

 

Props 란?

Property의 줄임말이다. 리액트 Component의 속성이고, 컴포넌트에 전달한 다양한 정보를 담고 있는 자바스크립트 객체이다.

props의 특성

1. Read-Only (읽기 전용) 이다. -> 값을 변경할 수 없다.
2. 같은 Props에 대해서는 항상 같은 결과를 보여주어야 한다. (pure)

다음은 예시 코드이다.

function App(props) {
    return (
        <Profile
            name="wangpig"
            introduction="hi, I'm happy."
            viewCount={1500}
        />
    );
}

 

Profile 컴포넌트의 Props는 아래와같이 전달된다.

{
    name: "wangPig",
    introduction: "hi, I'm happy.",
    viewCount 1500
}

 

그리고 Props에 다음과 같이 컴포넌트도 넣을 수 있다.

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

Layout 컴포넌트의 props로는 정수값을 가진 width, height과 리액트 Element로 header, footer가 들어오게 된다. 이처럼 jsx를 사용하는 경우에는 간단하게 컴포넌트에 props를 사용할 수 있다.

 

cf) jsx를 사용하지 않는 경우에는 아래와 같이 props를 넘겨주어야한다. (추천하지 않음)

React.createElement(
    Profile,
    {
        name: "wangPig",
        introduction: "hi, I'm happy.",
        viewCount: 1500
    },
    null
);

 

Function Component, Class Component

1. Funtion Component

function Welcome(props) {
    return <h1>안녕, {props.name}</h1>;
}

위의 경우에는 하나의 props를 받아서 인삿말이 담긴 리액트 Element를 리턴하기 때문에 리액트 컴포넌트라고 할 수 있다. 함수 컴포넌트는 간단한 것이 장점이다.

2. Class Component - javaScript ES6의 클래스라는 것을 사용해서 만들어진 형태의 컴포넌트
함수 컴포넌트에 비해 몇가지 추가적인 기능을 가지고 있다.

class Welcome extends React.Component {
    render() {
        return <h1>안녕, {this.props.name}</h1>;
    }
}

리액트의 모든 컴포넌트는 React.Component를 상속받아서 만들어진다.