React.js - Component 만들기

 

 

이번 시간에도 리액트를 어떻게 하면 쉽게 설명할 지의 대한 고민이 생겼다.

'Component(컴포넌트)'라는 말에서 벌써부터 어려움을 겪는 초보자들이 있을 것 같다.(물론 나도 초보지만...)

리액트에서 Component는 어떤 역활을 하는지 정말 쉽고 간단하게 설명해보려고 한다.

 

 

 

 

리액트에서 Component(컴포넌트)란?

 

 

 

React.js 공식 홈페이지에서 번역기를 돌려 가져왔다...(개발자인데 영어를 못하는게 함정...)

 

혹시 Java Web을 개발하시는 분들이라면 "CustomTag"를 만드는 방식과 비슷하다고 생각한다. 

결국에 자신이 만들고 싶은 템플릿을 만드는 것. "커스터마이징"을 한다고 본다.

 

이제, 컴포넌트가 왜 "작고 재사용 가능한 코드 조각" 이라고 하는지 알아보려고 한다.

 

 

 

 

컴포넌트를 만들자(TestComponent.js).

 

 

 

 

 

일단 컴포넌트도 "일반 JavaScript 함수"이기 때문에 .js 파일을 하나 만든다.(이름은 아무거나 상관없습니다.)

 

리액트를 사용하기 위해 js파일에 import React, { Component } from 'react';를 추가시켜 주자.

 

그리고 class문을 활용해 컴포넌트를 만들어 주면 된다.

 

여기서 가장 중요한건, 컴포넌트 안에는 무조건 render와 return이 필수다.

 

return 안에는 자신이 생성하고 싶은 랜더링을 만들면 된다. (React에서는 Element의 Attribute들이 약간 다른점이 있는데 그건 추후에...)

 

그리고 마지막으로 이 컴포넌트를 사용하기 위해서 export defualt 컴포넌트이름; 을 추가해 줘 모듈화 시켜준다.

 

말 그대로 'export' 내보내기를 한다는 것이다. 

 

 

 

컴포넌트를 써보자(App.js).

 

 

 

 

export(내보내기) 한 컴포넌트를 사용하기 위해서는 import(가져오기)를 해야된다.

 

import는 부모 컴포넌트에서 import 컴포넌트명 from '컴포넌트 경로';를 통해 설정한다.

 

그리고 <컴포넌트명 /> 이런식으로 불러와서 사용하면 된다.

 

간혹 컴포넌트를 불러와도 출력이 안된다면, 첫번째로 경로가 제대로 확인 되어있는지, 두번째로 생성한 컴포넌트를 export 하였는지, 세번째로 생성한 컴포넌트에 에러는 없는지 확인하면 된다.

 

 

 

컴포넌트는 여러가지의 형태로 만들 수 있다. 

 

예를들어 커스터마이징한 버튼 컴포넌트를 하나 만들고 여러페이지에서 사용할 수 있고(재사용) 관리도 용이한게 특징이다.