React Component 만들기 및 랜더링

Web/React

괘창 2024. 6. 26. 15:55

- Component 만들기

# 리액트 컴포넌트는 크게 클래스 컴포넌트와 함수 컴포넌트로 나뉜다.

- Function Component(함수 컴포넌트)

: 모든 React 컴포넌트는 pure 함수 같은 역할을 해야한다.

즉 React의 컴포넌트를 일종의 함수라고 생각한다는 뜻

함수 컴포넌트 예제)

# 해당 함수는 하나의 props 객체를 받아 인사말이 담긴 React 엘리먼트를 리턴하여 React 컴포넌트다.

# 함수 컴포넌트는 간단한 코드를 장점으로 가지고 있다.

- Class Component(클래스 컴포넌트)

: 자바스크립트 ES6 class 라는 것을 사용해서 만들어진 형태의 컴포넌트다.

클래스 컴포넌트는 함수 컴포넌트에 비해 몇 가지 추가적인 기능을 가지고 있다.

클래스 컴포넌트 예제)

# 위 클래스 컴포넌트는 위 welcome 함수 컴포넌트와 동일한역할을 하는 컴포넌트를 클래스 형태로 만들었다.

# 함수 컴포넌트와 차이점은 React의 모든 클래스 컴포넌트는 React.Component를 상속받아 만든다.

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

# 위 코드에선 React.Component를 상속받아 Welcome이라는 클래스를 만들었다.

React.Component를 상속받았기 때문에 리액트 컴포넌트가 되는 것이다.

- Component의 이름

: 컴포넌트의 이름은 항상 대문자로 시작해야 한다.

# React는 소문자로 시작하는 컴포넌트를 DOM 태그로 익식한다.

# div나 span과 같이 사용하는 것은 내장 컴포넌트라는 것을 뜻하며, div나 span과 같은 문자열 형태로

react.createElement에 전달된다.

# 대문자로 시작하는 경우에는 react.createElement 형태로 컴파일되며 자바스크립트 파일내에서

사용자가 정의헀거나 임포트한 컴포넌트를 가르키게 된다.

예제 코드)

# 첫 번째 코드는 DOM 태그를 사용하여 엘리먼트를 만든 코드다.

DOM 태그들은 div, h1, span 등처럼 모두 소문자로 시작한다.

# 두 번째 코드는 사용자가 정의한 Welcome이라는 컴포넌트를 사용한 엘리먼트다.

해당 코드에서 컴포넌트명인 Welcome이 소문자로 시작했다면 React는 내부적으로 이것을

컴포넌트가 아닌 DOM 태그로 인식하게 된다.

※ 컴포넌트의 이름을 소문자로 사용하고 싶다면, 먼저 대문자로 시작하는 변수에 할당한 후 해당 변수를 사용하면 가능!

- Component 랜더링

: 컴포넌트는 붕어빵 틀의 역할을 하기 땜누에 실제로 컴포넌트가 화면에 랜더링 되는 것은 아니다.

컴포넌트라는 붕어빵 틀을 통해 찍어서 나온 엘리먼트라는 붕어빵들이 실제로 화면에 보이게 된다.

# 랜더링을 하기 위해서는 가장 먼저 컴포넌트로부터 엘리먼트를 만들어야 한다.

예제 코드)

# 위 두줄은 모두 React 엘리먼트를 만들어내게 된다. 이후 해당 엘리먼트를 랜더링하면 끝!

랜더링 코드 예제)

# Welcome 함수 컴포넌트 선언 하였으며, Welcome name="인제"라는 값을 파라미터로 해서 reactDOM.render함수 호출

이렇게 하면 리액트는 welcome 컴포넌트에 name 인제라는 props를 넣어 호출하고 그 결과로 리액트 엘리먼트 생성