[React] - 컴포넌트(Component란?)

리액트는 컴포넌트(Component) 라고 하는 단위를 기반으로 구성되어 있다. 

 

컴포넌트의 특징

1. 재사용성

컴포넌트는 여러 곳에서 재사용할 수 있어 개발 속도와 생산성을 높여준다.

 

2. 컴포넌트 내부에서 state를 관리할 수 있도록 해준다

useState 메서드를 사용하여 쉽게 관리 가능하다.

 

컴포넌트는 크게 함수형 컴포넌트, 클래스형 컴포넌트로 나눌 수 있다. 

---

함수형 컴포넌트

말 그대로 함수 기반 컴포넌트로, 자바스크립트 함수를 작성함으로써 가장 간단하게 컴포넌트를 정의하는 방법이다.

(상단에 import React from "react"; 는 필수적으로 작성해줘야 한다.)

 

Home.js에서 함수형 컴포넌트를 만드는 예시

import React from "react";

function Home() {
    return <h1>Home화면</h1>;
}

export default Home; //다른 .js 파일에서 불러올 수 있도록 export

 

화살표 문법을 활용하여 아래와 같이 나타낼 수도 있다.

(화살표 문법에 대해서는 추후 포스팅하도록 하겠다.)

import React from "react";

const Home = () => {
    return <h1>Home화면</h1>
}

export default Home; //다른 .js 파일에서 불러올 수 있도록 export

---

클래스형 컴포넌트

클래스 기반 컴포넌트로, 클래스로 정의한다. 

과거에는 클래스형 컴포넌트가 많이 사용되었으나, 현재는 함수형 컴포넌트가 주로 많이 사용된다고 한다.

 

클래스형 컴포넌트를 사용하는 경우, Component Class를 상속받아 구현되기 때문에 

상단에 import React, {Component} from "react"; 써서 반드시 import 시켜줘야 한다. 

또한, render() 메서드를 필수적으로 사용해야함에 주의하자!

 

Home.js에서 클래스형 컴포넌트를 만드는 예시

import React, {Component} from "react";

class Home extends Component {
    render() {
        return <h1>Home화면</h1>
    }
}

export default Home;

위 코드 예시를 보면, Component를 상속받은 Home 클래스 내에서 render() 메서드를 확인할 수 있다.

---

App.js에서 불러오기

import React, {Component} from 'react';
import Home from './pages/Home'; //

function App(){
   return (
      <div>
         <Home />
      </div>
   )
}

간단하게 App.js에서 Home 컴포넌트를 불러온 예시이다.

컴포넌트를 불러오는것은 외부 파일을 사용하는 것이기 때문에 import시켜줘야 한다.

(함수형이든, 클래스형이든 외부 컴포넌트를 불러와서 사용하는 방식은 동일하다!)

 

---

참고!

주의할 점은, 컴포넌트의 이름은 항상대문자로 시작해야 한다는 것이다. 컴포넌트 이름이 소문자로 시작하는 경우 리액트 내에서 내부적으로 Component라고 인식하지 않는 문제가 발생하므로 컴포넌트 이름은 꼭 대문자로 짓도록 하자.