컴포넌트 Component
우선 들어가기에 앞서 컴포넌트(Component)에 대해 알아봐야 합니다. 리액트에서 컴포넌트라고 하는 것은 자바스크립트의 함수 개념과 유사하다고 할 수 있습니다. 이 컴포넌트를 통해서 UI를 만들어냄은 물론이고 이벤트에 따른 동작 변화까지 만들어 낼 수 있습니다. 리액트의 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지가 있습니다. 먼저 클래스형 컴포넌트에 대해서 알아보도록 하겠습니다.
클래스형 컴포넌트
클래스형 컴포넌트는 컴포넌트를 class 형태로 작성하는 것입니다. ES6 이후로 부터 추가된 class 명령을 통해서 컴포넌트를 작성합니다. 이때 render() 함수로 결과물을 반환합니다.
import React, {Component} from 'react';
class App extends Component {
render() {
return <h1>클래스형 컴포넌트</h1>
};
}
export default App;
클래스형 컴포넌트는 컴포넌트의 상태와 관련한 state 기능과 생명주기 기능을 이용할 수 있다는 것 입니다. 이 둘에 대해서는 추후로 다룰예정이니 지금은 그런게 있구나~ 하시면 됩니다.
함수형 컴포넌트
함수형 컴포넌트는 컴포넌트를 함수와 같은 방식으로 작성하는 것 입니다. 우리가 create react-app을 통해 리액트 앱을 생성했을때 처음에 봤던 App.js의 형태가 바로 함수형 컴포넌트 방식입니다.
import React from 'react';
function App() {
return (
<h1>함수형 컴포넌트</h1>
);
}
export default App;이 형태를 ES6 표준에 맞게 애로우 함수로 변경해 줄 수도 있습니다. 앞으로도 함수형 컴포넌트를 사용할 때면 가급적이면 애로우 함수를 이용한 방식으로 사용하겠습니다.
import React from 'react';
const App = () => {
return (
<h1>함수형 컴포넌트</h1>
);
}
export default App;
함수형 컴포넌트는 아무래도 클래스 작성보단 함수를 더 많이 작성했을 확률이 높기 때문에 작성이 익숙하다 라는 장점이 있습니다. 또한 메모리를 함수가 더 적게먹고, 배포 단계에서도 결과물의 용량이 작아지는 효과도 있습니다. 더 적다고는 하지만 사실은 지금 시대의 고성능 개인 컴퓨터가 연산하기에, 우리가 느끼기에는 사실 그렇게 체감되는 부분은 아닙니다.
함수형 컴포넌트는 클래스형 컴포넌트에서 이용하던 state나 생명주기 기능을 이용할 수 없다는 점이 있습니다.
추가, 2020년 10월에 발표된
React v17에서 업데이트된 내용입니다.더이상 컴포넌트의 상단에
import React from 'react';를 작성하지 않아도 된다고 합니다. 이제 내부적으로 JSX transformer라는 것이 jsx를 React 요소로 자동적으로 변환시켜주기 때문에 생략해도 됩니다.즉, 최상위(index.js)에만
import~~가 기술되어 있다면 하위 컴포넌트에서 일일히 작성하지 않아도 되는 것 입니다.
클래스형 컴포넌트 VS 함수형 컴포넌트
그렇다면 두가지 방식 중에서 무엇을 우선시하며 사용해야 할까요? 결론부터 이야기 하자면 공식 문서에서도 함수형 컴포넌트를 우선적으로 사용해야한다고 권장하고 있습니다.
함수형 컴포넌트는 클래스형 보다 간결하다는 장점이 있습니다. 대부분의 프로그래밍 기술은 얼마나 간결하고 편하게 사용할 수 있는지가 사용자를 모으는 관건이 되는 만큼 간결한 함수형 컴포넌트의 사용을 권장합니다. 앞에서 클래스형 컴포넌트에서 이용하던 state와 생명주기 기능을 이용하지 못한다고 했었는데 이 부분은 Hooks라는 기능이 등장하면서 함수형 컴포넌트에서도 이들을 사용할 수 있게 되었습니다. 그래서 공식문서에도 새로 작성하게 되는 컴포넌트는 함수형으로 작성하기를 권장하고 있습니다.
