[React] 컴포넌트, 개념 꽉잡기..

1. 컴포넌트 종류

1-1 함수형 컴포넌트

function App() {
  const name = '리액트';
  return <div className = "react">{name}</div>;
}

함수형 컴포넌트의 특징을 한번 나열해보자.

• 선언하기 편리하다
• 메모리 자원을 덜 사용한다.
• Hooks라는 기능이 추가되면서, state와 라이프사이클 API의 사용이 가능해졌다.

1-2 클래스형 컴포넌트

import {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className = "react"> {name} </div>;
  }
}

클래스형 컴포넌트는 state기능과 라이프사이클 기능을 이용할 수 있으며, 임의 메서드를 정의할 수 있다.
클래스형 컴포넌트는 꼭 render 함수를 가지고 있어야 한다!

그래서..둘 중에 무엇을 이용하라는 거임?

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때, 함수 컴포넌트와 Hooks를 사용하도록 권장하고는 있다고 합니다! 그렇다고 해서 클래스형 컴포넌트가 사라지는 건 아님

2. 컴포넌트 만들어보기

src 파일 안에 js 파일을 하나 만들어 컴포넌트를 import 하고 export해보자.
src라는 폴더 안에 MyComponent.js 파일을 하나 만들고 아래와 같이 코드를 입력해보자.

const MyComponent = () => {
  return <div>새로운 컴포넌트</div>;
};

export default MyComponent;

함수를 생성하는 키워드인 function 키워드를 사용하지 않고, 화살표 함수를 이용하여 표현하였다.

export

마지막에 작성한

export default MyComponent;

이거는 왜 있냐면 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정해주는 것이다.

import

App.js 에 불러와보자.
우리는 App을 만들것이고 여기서 우리가 만든 컴포넌트 불러오면 되니까~

import MyComponent from './MyCopmonent';

const App = () => {
  return <MyComponent />;
};

export default App;

import 구문을 이용하여서 우리가 만든 컴포넌트를 불러온 것이다.