[포스코x코딩온] 웹개발자 입문 과정 8주차 | 컴포넌트(함수형|클래스형)

1. 컴포넌트란?

 리액트에서 앱을 이루는 최소 단위를 컴포넌트라고 한다.

 리액트에서 화면의 UI요소를 구분할 때 사용하는 단위로,

 하나의 가장 작은 조각으로 이해하면 된다.

 

 앞선 블로그 설명에서 설명한  '아토믹 디자인 패턴'에서 가장 작은 단위인 원소를 지칭한다.

 2023.04.20 - [프론트앤드/React] - [포스코x코딩온] 웹개발자 입문 과정 8주차 | React.js 정의 및 설치(MAC)

 

 컴포넌트를 사용하는 이유는 반복이 가능한 장점이 있기 때문이다.

 컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주고,

 변화가 일어날 때 주어진 작업들을 처리한다.

 또한 임의 메서드를 만들어 기능을 추가할 수도 있다.

 

 컴포넌트를 선언하는 방식은 두가지가 있다.

 하나는 함수형 컴포넌트이고, 다른 하나는 클래스형 컴포넌트이다.

 

 함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 

 클래스형 컴포넌트의 경우 render함수가 반드시 있어야하고, 그안에서 JSX를 반환해야한다.

 또한 이전에는 클래스형 컴포넌트만 state 및 라이프사이클 기능을 사용할 수 있었으나,

 리액트가 업데이트 됨에 따라 Hooks라는 기능이 도입되어 useState, useEffect를 통해

 함수형 컴포넌트에서도 두 기능 모두 사용할 수 있게 되었다.

 

 함수형 컴포넌트가 클래스형 컴포넌트보다 선언하기 편하고,

 메모리 자원도 클래스형 컴포넌트보다 덜 사용하므로, 

 현재 함수형 컴포넌트를 주로 사용한다.

 

 

 

2. 함수형 / 클래스형 컴포넌트 비교

함수형	클래스형
방법 1) 화살표 함수	import React, { Component } from 'react';   class MyComponent extends Component {     render() {         return (             <div>                 나의 새롭고 멋진 컴포넌트             </div>         );     } }   export default MyComponent;
import React from 'react';   const MyComponent = () => {     return <div>나의 새롭고 멋진 컴포넌트</div>; };   export default MyComponent;
방법 2) 함수 선언문
import React from 'react';   function MyComponent ()  {     return <div>나의 새롭고 멋진 컴포넌트</div>; };   export default MyComponent;

 exportdefault MyComponent;

 이 코드는 다른 파일에서 이 파일을 import할 때,

 위에서 선언한 MyComponent클래스를 불러오도록 설정하는코드이다.

 

 함수형 컴포넌트에서는 함수 선언문 또는 화살표 함수를 사용할 수 있다.

 

 클래스형 컴포넌트를 작성할 때는

 import React, {Component} from 'react'

 위와 같이 Component를 import 해주어야 컴포넌트를 사용할 수 있다.

 (React만 import하고 extends React.Component해도 된다.)

 

 그리고 클래스형 컴포넌트에는 render함수를 반드시 사용해주어야한다.
 그 다음 render함수 안에 JSX문법을 작성해주면된다.