[React] Component 만들기

리액트에서 컴포넌트는 크게 Function Component(함수 컴포넌트)와 Class Component(클래스 컴포넌트)로 나뉜다.

예전에는 클래스 컴포넌트를 사용했는데 최근에는 함수 컴포넌트를 개선해서 주로 사용한다고 한다.

1. Function Component(함수 컴포넌트)

function Welcome(props) {
    retuen <h1>안녕하세요, {props.name}</h1>;
}

Welcome이라는 이름을 가진 함수로, 하나의 props 객체를 받아서 인사말이 담긴 리액트 엘리먼트를 리턴하는 코드이다.
❕ 함수 컴포넌트의 장점: 간단한 코드

2. Class Component(클래스 컴포넌트)

: 자바스크립트 ES6의 class를 사용해서 만들어진 형태의 컴포넌트

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

위에서 함수 컴포넌트로 작성한 Welcome과 동일한 역할을 하는 컴포넌트를 class coponent로 작성한 것이다.

함수 컴포넌트와의 차이점
: React.Component를 상속 받아서 만든다는 것

💡 여기서 상속이란?
한 클래스의 변수, 함수들을 상속 받아 새로운 자식 클래스를 만드는 방법
여기선 React.Component라는 클래스를 상속받아 Welcome이라는 클래스를 만든 것이므로 결과적으로 React 컴포넌트가 되는 것

3. Component의 이름

⭐⭐⭐ 항상 대문자로 시작
리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문

🔆 예제 코드

• HTML 태그로 인식

const element = <div />;

• Welcome이라는 리액트 component로 인식

const element = <Welcome name="감자" />;

만약 소문자 컴포넌트 이름을 사용하고 싶다면 먼저 대문자로 시작하는 변수에 할당한 뒤 그 변수를 사용하면 된다. 그러나 대문자 사용을 권장!

4. Component 렌더링

• DOM 태그를 사용한 element

const element = <Welcome name="감자" />;

• 사용자가 정의한 Component를 사용한 element

const element = <Welcome name="감자" />;

🔆 실제 렌더링하는 코드

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

const element = <Welcome name="감자"/>;
ReactDOM.render(
    element,
    document.getElementById('root')
)

Welcome이라는 함수 컴포넌트를 선언.
Welcome name="감자"라는 값을 가진 엘리먼트를 파라미터로 해서 ReactDOM.render함수를 호출
ㅤ
-> 리액트는 Welcome 컴포넌트의 name=감자라는 props를 넣어서 호출하고 그결과로 리액트 엘리먼트가 생성됨
ㅤ
생성된 엘리먼트는 리액트 돔을 통해 실제 돔에 효과적으로 업데이트가 되어 우리가 브라우저를 통해서 볼 수 있게 된다.