Component 만들기 [처음 만난 리액트 #17]

5강. Components and Props

[무료] 처음 만난 리액트(React) - 인프런 | 강의

---

React Component의 종류

 

리액트에서의 컴포넌트는 크게 Function Component와 Class Component로 나뉨

 

● 리액트의 초기 버전에서는 Class Component를 주로 사용
● Class Component가 사용하기 불편하다는 의견이 많이 나왔고, 이후에는 Function Component(함수 컴포넌트)를 개선해서 주로 사용하게 됨

● 함수 컴포넌트를 개선하는 과정에서 개발된 것이 hook

 

---

Function Component

모든 리액트 컴포넌트는 Pure 함수같은 역할을 해야 함 

= 리액트 컴포넌트를 일종의 함수라고 생각

 

▼ 함수 컴포넌트 예제 코드

 

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

 

Welcome 함수 - 하나의 props 객체를 받아서 인사말이 담긴 리액트 element를 리턴하기 때문에 리액트 컴포넌트 

 

함수 컴포넌트는 간단한 코드를 장점으로 가짐 

 

Class component

Class Component는 자바 스크립트 es6의 클래스라는 것을 사용해서 만들어진 형태의 컴포넌트

함수 컴포넌트에 비해 몇 가지 추가적인 기능들을 가지고 있음

 

▼ 클래스 컴포넌트 예제 코드

 

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

 

위의 함수 컴포넌트 Welcome과 동일한 역할을 하는 컴포넌트를 클래스 형태로 만든 것

- 함수 컴포넌트와의 가장 큰 차이점

리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만듦

● 상속: 객체지향 프로그래밍에서 나오는 개념, 한 클래스의 변수들과 함수들을 상속받아서 새로운 자식 클래스를 만드는 방법

● 위 예시에서는 React.Component라는 클래스를 상속받아서 Welcome이라는 클래스를 만들었고, 이는 React.Component를 상속받았기 때문에 결과적으로 리액트 컴포넌트가 됨 

 

---

Component의 이름 

Component의 이름은 항상 대문자로 시작해야 한다!

리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문

 

● 엘리먼트 타입이 소문자로 시작한다는 것은 그것이 <div> or <span>와 같은 내장 컴포넌트라는 것을 뜻함

이 컴포넌트들은 결과적으로 'div'혹은 'span'와 같은 문자열의 형태로 React.createElement에 전달

● <Foo />와 같이 대문자로 시작하는 타입은 React.createElement(Foo)와 같이 컴파일되며, 따라서 JavaScript 파일에 정의되어있거나 혹은 다른 파일에서 import 된 컴포넌트여야 한다

 

---

HTML div 태그로 인식

const element = <div />;

 

▲ DOM 태그를 이용해서 엘리먼트를 만든 것 

DOM 태그들은 <div>, <h1>, <span> 처럼 모두 소문자로 시작

 

---

Welcome이라는 리액트 Component로 인식

const element = <Welcome name="인제" />;

 

▲ 사용자가 정의한 Welcome이라는 컴포넌트를 사용한 element 

만약 여기에서 컴포넌트 이름이 소문자로 시작했다면, 리액트는 내부적으로 이것을 컴포넌트가 아니라 DOM 태그라고 인식하게 됨 -> 에러가 발생하거나 우리가 원하는대로 결과가 나오지 않게 됨 

 

 

만약 컴포넌트 이름을 꼭 소문자로 사용하고 싶다면, 

먼저 대문자로 시작하는 변수에 할당한 뒤 이 변수를 사용하면 됨 

But 웬만하면 대문자로 사용하는 것을 권장!

 

---

Component 렌더링

컴포넌트는 붕어빵 틀의 역할을 하므로 컴포넌트가 실제로 화면에 렌더링 되는 것은 아님

: 컴포넌트라는 붕어빵 틀을 통해 찍어져서 나온 엘리먼트라는 붕어빵이 실제로 화면에 보이게 되는 것

 

렌더링을 위해서는 가장 먼저 컴포넌트로부터 엘리먼트를 만들어야 함!

 

---

DOM 태그를 사용한 element

const element = <div />;

 

사용자가 정의한 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를 넣어서 호출하고, 그 결과로 리액트 엘리먼트가 생성

     이렇게 생성된 엘리먼트는 최종적으로 reactDOM을 통해 실제 DOM에 효과적으로 업데이트되고 브라우저를 통해 볼 수 있게 됨