[React] 컴포넌트(component)

 

---

알고있으면 좋은 React Tip✨

---

컴포넌트(component)란?

• 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용한다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있다.
• 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC 의 뷰를 독립적으로 구성하여 재사용할 수 있다.
• 리액트의 중요한 핵심인 '컴포넌트'에는 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있다.

 

(1)함수형 컴포넌트

• 함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트이다.
• 함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환한다.
• Hooks를 통한 LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장한다.
• 클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용한다.

import React from 'react';

function App(){
   const name = '리엑트';
   return(
     <div>
        {name}
     </div>
   )
}

export default App;

• 화살표 문법으로 정의하여 사용할 수 있다.

import React from 'react';

const App = () => {
   const name = '리엑트';
   return(
     <div>
        {name}
     </div>
   )
}

export default App;

 

(2)클래스형 컴포넌트

• 자바스크립트의 "클래스" 기반 컴포넌트로, class로 정의하고 render() 함수에서 jsx 코드를 반환한다.
• React의 ComponentClass를 상속받아  Component 상속이 필요하다.
• 클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX 를 리턴한다.
• state, props, refs,컴포넌트 메서드, 생명주기 메서드를 사용할 때 this 로 프로퍼티를 참조하여 사용한다.

import React, {Component} from 'react';

class App extends Component{
   render(){
      const name = '리엑트';
      return(
         <div>
            {name}
         </div>
      )
   }
}

export default App;