[React 기초] React Component 구성 - Class형 Component와 함수 Component

React를 구성하고 작동하게 하는 영역이 있습니다. 그 영역을 콤포넌트(Componenrt)라고 하는데 오늘은 간단하게 Component를 이해해 보도록 합니다. 

 

본 내역은 제로초 TV의 React 무료 웹게임을 기본으로 좀 더 자신의 것으로 만들어 보고자 정리한 것입니다. 

 

1. Component 구성방법

 

구성방법을 알아 보기전에 거의 모든 산업군에 쓰이는 용어가 영어로 되어있음을 인지해야 합니다. 만국 공통어이기도 하지만 해외에서 활발하게 활동과 개발이 이루어지면서 공통언어인 영어로 대부분 사용이 되어 상호간 커뮤니케이션이 문제가 없게 되는 현상입니다. 

 

영어라는 학문은 어떠한 경우에도 다방면으로 도움이 되니 반드시 적응하도록 노력할 필요가 있습니다. 

 

각설하고, 

 

Component는 '요소, 항목'이라는 뜻을 가지고 있는데요 리액트를 구성하는 규칙적인 요소라고 이해하면 됩니다. 

 

2. Class형 콤포넌트와 함수 콤포넌트

 

말 그대로 두가지 형태의 콤포넌트가 있는데 하나는 Class형이고 또 다른 하나는 함수로 구성된 콤포넌트입니다. (개인적으로는 함수형 콤포넌트라고 부르고 싶은데 그게 개발자들 사이에서 아직 명확하게 결론이 안난 듯 합니다.)

 

최근에는 대부분이 함수 콤포넌트 형태로 이루어진다고 하는데 과거에 사용되었던 코드나 구버전에서 class형태가 많이 사용되었고 지금도 작동하고 있다고 하니 class형태 또한 완벽하진 않아도 기본구조 정도를 알고 있는것이 좋을듯 합니다. 

이제 Class형 Component의 기본구조와 함수 Component의 기본구조를 보면서 눈에 익히도록 합니다.  

 

▶ Class형 Component 기본구조

 

이는 자바스크립트의 class 구문을 따릅니다. 전체적 기본 구조는 다음과 같이 나타낼 수 있습니다. 서두에 이야기 한바와 같이 React 또한 웹 베이스이기에 기본 HTML 구문에서 공부를 해 보도록 합니다. 다음과 같이 나타낼 수 있습니다. 

 

 

상기 그림에서 주황색 사각형 안 내역이 Class형의 기본 Component라고 보면 됩니다. 반드시 필요한 기본 내역을 정리하자면 다음과 같습니다. 

 

① class 콤포넌트명 extends React.Component {

      constructor(props) {

         super(props);

         데이타를 나타내는 곳

      }

    }

의 형태를 기억하고 사용해야 합니다. 특히 대 소문자에도 주의하여 사용하고 데이터를 나타내는 곳에서 현재상태에 대한 코딩이 일어나는 곳입니다. 

 

② render(  ) {     }  영역에서는 코드 실행 내역에 따라 화면에 렌더링 되는 영역입니다. 

 

▶ 함수 Component의 기본구조 

 

함수 Component의 기본구조는 Class를 사용했던 부분을 함수로 Component로 만들어 주는 경우를 말합니다. Class형과 비교했을 경우 장점은 Class형은 this를 사용하게 되는데 자바스크립트에서 개념이 어려운 this를 사용하는 것 보다 함수를 사용함으로써 좀 더 쉽게 코딩을 할 수 있는 장점을 가지고 있습니다. 

 

그럼 함수 Component의 기본구조를 보면서 Class 형과 어떤 점에서 차이가 나는지 확인해 보도록 하겠습니다. Component 부분만 함수로 바꾸도록 하겠습니다. 나머지 구조는 전부 같습니다. 

 

 

보기 및 코드에 사용된 줄이 상당히 줄어든 것을 볼 수 있습니다. 함수를 사용하여 Class형에서 사용되는 setState부분이 useState로 바뀌는 개념입니다. 이는 관습적으로 외울 필요가 있는 구문입니다.

 

상기 함수 구문은 화살표 함수로 바꾸어서 사용할 수 있습니다. 

 

 

 

그럼 다음 시간부터는 Class형과 함수를 이용한 Component가 어떻게 사용되는지 간단한 예제를 통해 확인해 보도록 하겠습니다.