리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트(Component)'라는 단위를 사용합니다.
컴포넌트(Component) 는 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있습니다. 다시 말하면 UI를 구성할때 부품을 조립하듯이 완성할 수 있도록하는 것이 '컴포넌트(Component)' 입니다. 레고 블록으로 무언가를 만든다고 할때 하나의 블록이 '컴포넌트'라고 할 수 있습니다.
UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩 하므로서 재사용성을 증가 시키고 이미 만들어진 컴포넌트들을 이용하여 새로운 컴포넌트를 쉽게 만들 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
컴포넌트를 만들때 이름은 항상 대문자로 시작하도록 합니다. 왜냐 하면 React는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문입니다.
리액트에서 정의하는 컴포넌트 종류는 크게 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있습니다.
함수 컴포넌트
컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다.
|
// 컴포넌트 만들기
// 함수로 만들기
function WelcomeFunction() {
return <h2>함수 컴포넌트(Function Component) 입니다.</h2>;
}
|
클래스 컴포넌트
ES6의 class를 사용하여 컴포넌트를 정의할 수 있습니다. React.Component를 상속 받아 만듭니다.
|
// 컴포넌트 만들기
// ES6의 클래스로 만들기 class WelcomeClass extends React.Component {
render() {
return <h2>클래스 컴포넌트(Class Component) 입니다.</h2>;
}
}
|
현재 리액트 공식 문서에서는 함수형 컴포넌트와 Hook을 사용하는 것을 권장하고 있습니다.
클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook 을 통해 라이프 사이클 기능과 state 관리 기능을 사용할 수 있습니다.
함수 컴포넌트를 사용하면 다음과 같은 장점이 있습니다.
- 클래스형 컴포넌트보다 선언하기가 편합니다. 즉, 작성 코드가 더 적습니다. (클래스 형은 Class 선언, render()함수 선언, Component 상속, 상태관리를 위해 생성자 메소드 전언 등…이 필요합니다)
- 클래스형 컴포넌트보다 메모리 자원을 덜 사용합니다.
- 클래스형 컴포넌트보다 빌드 후 파일 크기가 더 작습니다.
- 함수형 컴포넌트는 render()함수가 필요 없어서 컴포넌트 마운트 속도가 더 빠르고, 가독성이 좋은 장점이 있습니다.
컴포넌트 렌더링
이전까지는 DOM 태그만을 사용해 React 엘리먼트를 나타냈습니다. React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다.
이미 만들어진 컴포넌트들을 이용하여 새로운 컴포넌트를 만들 수 있습니다.
|
const element = <WelcomeFunction/>
function App(){
return (
<div>
{element}
<WelcomeClass/>
</div>
);
}
// 최종적으로 렌더링을 합니다.
|
다음은 완성된 전체 코드 입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 009</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 컴포넌트 만들기
// 함수로 만들기
function WelcomeFunction() {
return <h2>함수 컴포넌트(Function Component) 입니다.</h2>;
}
// ES6의 클래스로 만들기
class WelcomeClass extends React.Component {
render() {
return <h2>클래스 컴포넌트(Class Component) 입니다.</h2>;
}
}
const element = <WelcomeFunction/>
function App(){
return (
<div>
{element}
<WelcomeClass/>
</div>
);
}
// 최종적으로 렌더링을 합니다.
ReactDOM.createRoot(document.querySelector('#app')).render(<App/>);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 10] HTML로 시작해보는 React 보너스(천자문 보기) (0) | 2024.10.15 |
|---|---|
| [React Exam 09] HTML로 시작해보는 React Component 속성 (1) | 2024.10.15 |
| [React Exam 07] HTML로 시작해보는 React 엘리먼트 렌더링 (6) | 2024.10.15 |
| [React Exam 06] HTML로 시작해보는 React JSX Style 사용하기 (1) | 2024.10.15 |
| [React Exam 05] HTML로 시작해보는 React JSX 속성 표현식 사용하기 (0) | 2024.10.15 |
