컴포넌트
- 사용자가 볼 수 있는 요소
- 단순한 템플릿 이상의 기능을 가지고 있다.
컴포넌트 기능
- 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것
- 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다.
- 임의 메서드를 만들어 특별한 기능을 붙일 수 있다.
컴포넌트를 선언하는 방식
클래스형과 함수형 컴포넌트 차이점
클래스형 컴포넌트
import React, { Component } from "react";
class App extends Component {
render() {
const name = "react";
return <div className="react">{name}</div>;
}
}
export default App;
- state 기능 및 라이프 사이클 기능을 사용할 수 있다.
- 임의 메서드를 정의할 수 있다.
- render 함수가 꼭 있어야하고 그 안에서 보여 주어야 할 JSX를 반환해야 한다.
함수형 컴포넌트
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent />;
};
export default App;
장점
- 클래스형 컴포넌트보다 선언하기가 훨씬 편하다.
- 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
- 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.
(함수, 클래스형 컴포넌트는 성능과 파일 크기 면에서 사실상 별 차이가 없으므로 이 부분은 너무 중요하게 여기지 않아도 된다.)
단점
- state와 라이프사이클 API를 사용할 수 없다.
-> Hooks 기능으로 해결할 수 있다.
리액트 공식 메뉴얼
컴포넌트 생성 (MyComponent.js)
const MyComponent = () => {
return <div>나의 새롭고 멋진 컴포넌트</div>;
};
화살표 함수 (ES6)
- 기존 function을 이용한 함수 선언 방식을 화살표 함수로 아예 대체할 수 없다.
- 서로 가리키고 있는 this의 값이 다르다.
function BlackDog() {
this.name = "흰둥이";
return {
name: "검둥이",
bark: function () {
console.log(this.name + "멍멍");
},
bark: () => {
console.log(this.name + "멍멍");
},
};
}
결론
- function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것 간에는 큰 차이가 없다.
모듈 내보내기 (MyComponent.js)
export default MyComponent;
모듈 불러오기 (App.js)
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent />;
};
export default App;