[React] 컴포넌트 소개 - 클래스형과 함수형 컴포넌트

이제 리액트에 대해 본격적으로 첫 발을 내딛을 시간입니다. 리액트는 ES6 이후부터의 문법을 많이 사용하기 때문에 ES6이후 문법이 익숙하지 않다면 읽으시는데 어려움이 있으실 수 있습니다. 제 블로그 자바스크립트 탭에 자주 사용되는 ES6에 대한 문법들을 기재해놨으니 참조해주시길 바랍니다.

---

1. 컴포넌트

우선 들어가기에 앞서 컴포넌트(Components)에 대해 알아봐야 합니다. 리액트에서 컴포넌트라고 하는 것은 자바스크립트의 함수 개념과 유사하다고 할 수 있습니다. 이 컴포넌트를 통해서 UI를 만들어냄은 물론이고 이벤트에 따른 동작 변화까지 만들어 낼 수 있습니다. 리액트의 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있습니다. 그리고 그 중에서 클래스형 컴포넌트에 대해서 먼저 다루도록 하겠습니다.

 

 

2. 클래스형 컴포넌트

클래스형 컴포넌트는 컴포넌트를 class 형태로 작성하는 것입니다. ES6 이후로 부터 추가된 class 명령을 통해서 컴포넌트를 작성합니다. 이때 render() 함수로 결과물을 반환합니다.

import React, {Component} from 'react';

class App extends Component {
  render() {
    return <h1>클래스형 컴포넌트</h1>
  };
}


export default App;

결과

클래스형 컴포넌트는 컴포넌트의 상태와 관련한 state 기능과 생명주기 기능을 이용할 수 있다는 것 입니다. 이 둘에 대해서는 추후로 다룰예정이니 지금은 그런게 있구나~ 하시면 됩니다.

 

 

 

3. 함수형 컴포넌트

함수형 컴포넌트는 컴포넌트를 함수와 같은 방식으로 작성하는 것 입니다. 우리가 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;

결과

함수형 컴포넌트는 import문도 그렇고 전체적으로 익숙하기 때문에 사용하기 편하다는 점이 있습니다. 또한 메모리를 함수가 더 적게먹고, 배포 단계에서도 결과물의 용량이 작아지는 효과도 있습니다. 더 적다고는 하지만 현대 컴퓨터가 연산하기에, 우리가 느끼기에는 사실 그렇게 체감되는 부분은 아닙니다.

함수형 컴포넌트는 클래스형 컴포넌트에서 이용하던 state나 생명주기 기능을 이용할 수 없다는 점이 있습니다.

 

 

 

4. 클래스형 컴포넌트 VS 함수형 컴포넌트

그렇다면 두가지 방식 중에서 무엇을 우선시하며 사용해야 할까요? 결론부터 이야기 하자면 공식 문서에서도 함수형 컴포넌트를 우선적으로 사용해야한다고 권장하고 있습니다.

함수형 컴포넌트는 클래스형 보다 간결하다는 장점이 있습니다. 대부분의 프로그래밍 기술은 얼마나 간결하고 편하게 사용할 수 있는지가 사용자를 모으는 관건이 되는 만큼 간결한 함수형 컴포넌트의 사용을 권장합니다. 앞에서 클래스형 컴포넌트에서 이용하던 state와 생명주기 기능을 이용하지 못한다고 했었는데 이 부분은 Hooks라는 기능이 등장하면서 함수형 컴포넌트에서도 이들을 사용할 수 있게 되었습니다. 그래서 공식문서에도 새로 작성하게 되는 컴포넌트는 함수형으로 작성하기를 권장하고 있습니다.

---

참조

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React