Posts [React] React의 컴포넌트(Component) - 함수형, 클래스형 컴포넌트
Post
Cancel

[React] React의 컴포넌트(Component) - 함수형, 클래스형 컴포넌트


React의 컴포넌트(Component)


🔖 리액트로 화면을 구성하게 되면, 사용자가 볼 수 있는 여러 가지 컴포넌트로 구성되어 있습니다. 사용자에게 보여지는 UI 요소들을 크게 컴포넌트로 구분할 수 있는 것입니다.


아래 코드는 create-react-app 명령어로 처음 리액트 프로젝트를 생성하였을 때 App.js 에 기본적으로 작성되어 있는 default 코드입니다. 아래처럼 작성하게 되면 함수형 컴포넌트라고 부릅니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

컴포넌트는 크게 함수형 컴포넌트와, 클래스형 컴포넌트로 구분됩니다.

  • 함수형 컴포넌트 : function 으로 정의하고 return 문에 JSX로 렌더링한다.
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import './App.css';

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

export default App;
  • 클래스형 컴포넌트 : class로 정의하고 render() 함수에서 JSX를 반환한다.
1
2
3
4
5
6
7
8
9
10
import React, {Component} from 'react';

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

export default App;

클래스형 컴포넌트로 작성하면, 이후에 state 기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있게 됩니다. 함수형 컴포넌트의 경우 이러한 기능들을 사용할 수 없었으나, 이후 리액트 업데이트를 통해 Hooks 기능이 도입되면서 이 점이 해결되었습니다.

리액트 레퍼런스에서는 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있지만, 함수형 및 클래스형 컴포넌트를 모두 알고 있어야 하겠습니다.


함수형 컴포넌트 작성하기

  • src 디렉토리 밑에 MyComponent.js 파일을 새로 생성하여 작성합니다.
  • 이 때 기존과는 다르게 () => {} 문법을 사용했는데, 새로운 함수 표현법입니다.
1
2
3
4
5
6
7
import React from 'react';

const MyComponent = () =>{
    return <div>테스트 페이지</div>;
};

export default MyComponent;

1
export default MyComponent;
  • export는 다른 파일에서 MyComponent 파일을 import해올 때 MyComponent로 불러올 수 있도록 정의해 주는 부분입니다.
  • 이것을 활용하여 다른 코드에서 import로 불러올 수 있습니다. 아래와 같이 App.js에서 <MyComponent/>라고 작성한 뒤 yarn start로 프로젝트를 실행시켜 보세요. 정상적으로 브라우저에 테스트 페이지 라고 표시될 것입니다. 단, import MyComponent from './MyComponent'; 로 컴포넌트를 불러와야 한다는 것을 꼭 잊지 마세요!
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import './App.css';
import MyComponent from './MyComponent';

function App() {
  return (
    <MyComponent/>
  );
}

export default App; // 다른 파일에서 App.js를 import할 때 App으로 불러올 수 있도록 정의

✏️ 왜 App.js에 있는 화면이 메인으로 띄워질까?

리액트는 번들러를 활용합니다. 특히 리액트 프로젝트에서는 webpack을 주로 사용하는데, node_modules에 가 보면 webpack이 알아서 설치되어 있음을 확인하실 수 있습니다.

webpack은 가장 처음으로 읽어들이는 entry point부터 시작하여 필요한 모든 모듈을 다 불러온 뒤 번들링하여 한 파일로 합쳐서 bundle.js 에 저장하는 역할을 합니다.

이 때 webpack 설정파일에 가 보면 entry point가 index.js로 정의되어 있을 것입니다. 그러면 index.js 에 가 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

이처럼 webpack의 entry point였던 index.js에, App.js의 요소를 그리도록 작성되어 있기 때문에, 첫 화면에 App.js의 것들이 보여지게 되었던 것입니다.



이 포스팅은 리액트를 다루는 기술(저자 김민준)을 학습하는 과정에서 개인적으로 정리한 내용입니다.

[알고리즘 트레이닝] 5장 - 동적계획법과 냅색(Knapsack) (백준 12865번 평범한 배낭 문제로 살펴보기)

[React] React의 props 설정하기