React의 컴포넌트(Component)
🔖 리액트로 화면을 구성하게 되면, 사용자가 볼 수 있는 여러 가지 컴포넌트로 구성되어 있습니다. 사용자에게 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있습니다.
아래 코드는 create-react-app 으로 처음 리액트 프로젝트를 생성하였을 때 App.js 에 기본적으로 작성되어 있는 코드입니다. 아래처럼 작성한 컴포넌트를 함수형 컴포넌트라고 부릅니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
import React from "react";
import "./App.css";
function NameBox() {
const name = "test";
return <div>{name}</div>;
}
export default NameBox;
이 때 함수형 컴포넌트는 function을 사용하지 않고 화살표 함수로 정의해도 됩니다.
1
2
3
4
5
6
7
8
9
import React from "react";
import "./App.css";
const NameBox = () => {
const name = "test";
return <div>{name}</div>;
};
export default NameBox;
- 클래스형 컴포넌트 : class로 정의하고 render() 함수에서 jsx 코드를 반환합니다.
1
2
3
4
5
6
7
8
9
10
import React, { Component } from "react";
class NameBox extends Component {
render() {
const name = "react";
return <div className="react">{name}</div>;
}
}
export default NameBox;
클래스형 컴포넌트에서는 state(상태)를 사용할 수 있으며 각종 라이프사이클 및 메서드를 이용하여 컴포넌트가 마운트 혹은 언마운트 될 때 추가 작업을 수행시키는 등 조작을 할 수 있었습니다. 하지만 Hook이 등장한 이후부터는 위 기능들을 함수형 컴포넌트에서도 대부분 구현이 가능하게 되었습니다. 결과적으로 react에서 제시하는 hook과 관련된 개요와 그 방법을 확인하시면 좋습니다.(공식 문서)
Hook에 관한 공식 문서의 설명 중 일부입니다.
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)
함수형 컴포넌트 작성하기
1
2
3
4
5
6
7
import React from "react";
const MyComponent = () => {
return <div>테스트 페이지</div>;
};
export default MyComponent;
- export는 다른 파일에서 MyComponent 파일을 import해올 때 MyComponent로 불러올 수 있도록 정의해 주는 부분입니다.
- 이것을 활용하여 다른 코드에서 import로 불러올 수 있습니다. 아래와 같이 App.js에서
<MyComponent/>라고 작성한 뒤yarn start(혹은 npm start)로 프로젝트를 실행시켜 보세요. 정상적으로 브라우저에 테스트 페이지 라고 표시될 것입니다. 단,import MyComponent from './MyComponent';로 컴포넌트를 불러와야 한다는 것을 꼭 잊지 마세요!
1
2
3
4
5
6
7
8
9
import React from "react";
import "./App.css";
import MyComponent from "./MyComponent";
function App() {
return <MyComponent />;
}
export default 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의 것들이 보여지게 되었던 것입니다.
[레퍼런스]
위 글의 내용 중 일부는 - 리액트를 다루는 기술(저자 김민준) 가 출처입니다.