React_3. 컴포넌트

컴포넌트의 정의

컴포넌트는 하나의 기능만 담당하도록 만들어진 코드의 묶음이라고 할 수 있다. 이러한 컴포넌트는 리액트의 핵심이라고 할 수 있을 정도로 중요하다. 모든 리액트 어플리케이션은 최소한 한 개의 컴포넌트를 가지며 이 최상위 root 컴포넌트를 기준으로 다른 컴포넌트가 파생되어 DOM과 비슷하게 계층적인 트리 구조를 이룬다.

컴포넌트의 형태

컴포넌트를 선언하는 방식은 클래스형과 함수형의 두 가지로 나누어진다. 함수형 컴포넌트는 클래스형 컴포넌트보다 선언이 편리하고 메모리도 더욱 효율적으로 사용하기 때문에 최근 주로 사용되고 있다. 또한 Hooks의 도입으로 클래스형 컴포넌트의 기능을 함수형 컴포넌트에서도 동일하게 사용할 수 있게 되었다.

클래스형 컴포넌트

import React, { Component } from `react`;

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

export default App;

클래스형 컴포넌트는 render() 함수 안에 JSX를 반환하는 특징을 가진다.

함수형 컴포넌트

import React from `react`;

function App() {
  const name = `react`;
  return <div className="react">{name}</div>;
}

export default App;

클래스형 컴포넌트에 비해 간단하게 작성할 수 있다.

모듈 내보내기와 불러오기

리액트 컴포넌트를 저장한 후 다른 컴포넌트에서 불러오기 위해선 다음과 같이 export와 import를 사용하면 된다.

import React from `react`;
import MyComponent from `./MyComponent`;

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

export default App;

위의 import 구문은 MyComponent 라는 컴포넌트와 React 자체를 불러오는 것을 볼 수 있다. 이를 통해 우리는 리액트 문법과 MyComponent를 사용할 수 있게 되었다. 다시 이를 내보내기 위해선 export를 이용하면 된다. 이를 통해 최종적으로 App이라는 컴포넌트는 index.js에서 렌더링 된다.

ReactDOM.render(
  <React.StrictMode>
  	<App />
  </React.StrictMode>,
  document.getElementById(`root`)
);

그렇다면 index.js의 ReactDOM.render와 React.StrictMode는 무엇일까?

• ReactDOM.render: 컴포넌트를 페이지에 렌더링하는 역할을 하며 두 파라미터로 구성된다. 첫 번째 파라미터는 JSX 문법으로 작성된 실제 렌더링할 내용이고, 두 번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정한다. document.getElementById('root')는 id가 root인 요소 안에 렌더링하도록 설정한다는 의미이다.
• React.StrictMode: 프로젝트에서 리액트 레거시 기능들을 사용하지 못하게 하는 기능으로 옛날 기능을 사용했을 때 경고를 출력해준다.

참고
리액트를 다루는 기술