컴포넌트

컴포넌트?

 컴포넌트라는 용어는 독립적인 기능을 수행하는 단위 모듈을 의미합니다. 리액트를 사용하는 개발자들에게 있어 애플리케이션을 설계할 때 사용자가 볼 수 있는 여러가지 컴포넌트들을 제공하는데 , 이는 애플리케이션 개발에서 재사용성을 높이고 유지보수를 용이하게 하기 위한 기술입니다. 

함수형/클래스형 컴포넌트

컴포넌트를 선언하는 방식은 두가지로 나누어지 집니다. 하나는 함수형 컴포넌트, 하나는 클래스형 컴포넌트 입니다. 이전 포스팅에서 다루었던 내용중 코드 하나를 인용하자면

function App() {
  const v_react = "React";
  return (
    <>
      <h1 className="react-Test">{v_react} Test</h1>
    </> 
  );
}

바로 위와 같은 App 함수 같은 경우가 함수형 컴포넌트 입니다 

 두번째로는 클래스형 컴포넌트가 있는데 위 App으로 선언된 함수형 컴포넌트 선언식을 클래스형 컴포넌트 선언식으로 바꾸어 보겠습니다.

import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ 
import './App.css';
import React,{Component} from'react';

class App extends Component{
  render(){
    const v_react =  "React";
    return <h1 className="react-Test">{v_react} Test</h1>
  }
}
export default App;

 역할은 똑같습니다 여기서 바뀐점이 있다면 클래스는 메서드를 지정할 수 있고 리액트에서 제공하는 Compnent를 상속받아 사용할 수 있습니다 또한 render 함수를 꼭 포함해야한다는 차이점이 있습니다.

 두가지 방식 모두 같은 결과를 반환하지만 상황에 맞는 선언 방식 사용이 중요합니다.  일반적으로 함수형 컴포넌트 의 장점이라 한다면 클래스 선언보다 간단하고 메모리 자원 활용에서 우월하다는 장점이 있습니다 그렇지만 함수형 컴포넌트의 단점이라 한다면 이후 다룰 state와 API 활용이 불가능하다는 점이 있습니다(Hooks 사용으로 해결은 가능...) 정리하자면 

 함수형 컴포넌트의 장단점 

• 장점 : 클래스형 컴포넌트보다 간단하다 , 메모리 자원 활용성이 좋다
• 단점 : state, 라이프사이클 API 활용불가(Hooks 사용으로 해결 가능 하며 리액트에서는 이를 권장하는 추세)

 클래스형 컴포넌트의 장단점

• 장점 :  state/API 사용가능, class 내부 메소드 정의 가능
• 단점 :  class 키워드, render 함수 등 필수 작성 키워드가 있음 리액트에서는 함수형 컴포넌트를 권장하는 추세(그렇지만 기존 리액트 프로젝트 다수가 클래스형 컴포넌트를 포함하고 있어 필수적으로 알아야할 개념 이라고 합니다.)