리액트를 공부하며 접한 컴포넌트에 대해 포스팅하려고 한다.

컴포넌트에 대해 알아보기 전에, 먼저 리액트의 개념을 알아보자.

리액트란?

• 사용자 인터페이스(UI)를 구축할 수 있는 자바스크립트 라이브러리이다.

• 인터페이스란?
  - 2개 이상의 장치나 소프트웨어 사이에서 정보나 신호를 주고받을 때 그 사이를 연결하는 연결장치나 경계면 또는 연결하는 경계에서 상호 접속하기 위한 하드웨어, 소프트웨어, 조건, 규약 등
  
  
  - 예를 들면, 무선 마우스를 노트북에서 쓰려면 동글이를 노트북에 꽂아야 한다.
  이때 이 동글이는 노트북과 무선 마우스를 연결하는 '인터페이스'가 된다.

• 유저 인터페이스(User Interface, UI)란?
  - 컴퓨터, 웹사이트, 시스템 등의 정보기기와 유저가 만나는 면
  - 정보기기와 유저가 서로 상호작용 할 수 있도록 연결해주는 매개체
  

• 리액트는 유저 인터페이스(UI)를 더 간단히 만들기 위해 컴포넌트를 도입했다.

그렇다면, UI를 더 간단히 만들기 위해 도입된 이 컴포넌트라는 건 뭘까?

컴포넌트

컴포넌트란?

• 하나의 의미를 가진 독립적인 단위의 모듈이다.
• 페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각

컴포넌트 생성하기

그럼 컴포넌트가 무엇인지 직접 만들어보며 알아보자.

리액트 파일 생성하기

먼저, npx create-react-app로 리액트 파일을 생성한다.

배울 때는 CRA(create-react-app)을 썼는데, 최신 트렌드는 Vite를 사용하는 쪽으로 움직이고 있다고 한다. (관련 블로그)

생성된 파일 중 App.js에 가면 여러 줄의 코드가 있는데, return 안에 있는 코드들을 지우고 npm start로 실행한다.

// App.js
function App() {
  return (
    <div></div>
  );
}

export default App;

그럼 아무것도 없는 빈 화면이 뜨는 것을 볼 수 있다.

이 빈 화면에 Hello, world!를 출력해보자.

App.js 생성하기

App.js에 단순히 <h1>Hello world!</h1>를 추가해주면 된다.

// App.js
function App() {
  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;

화면에 Hello world!가 잘 출력된 것을 알 수 있다.

이 Hello world!를 출력하는 기능을 하나의 컴포넌트로 분리해보자.

Hello world!를 출력하는 기능을 넣을 파일의 이름은 HelloWorld.js라고 할 것이다.

• 리액트에서 컴포넌트 이름을 만들 때는 대문자로 시작해야 한다. 그리고 한 단어 안에 여러 단어를 결합할 시 중간에 시작하는 서브 단어는 대문자로 시작해야 한다.(예: App.js, HelloWorld.js)

• 그리고, 컴포넌트 파일 등 JSX 문법을 사용하는 파일에서는 .js 확장자 대신 .jsx가 권장된다고 한다! 이 포스팅에서는 .js를 썼지만 다음부터는 .jsx를 사용해야겠다.

HelloWorld.js 생성하기

HelloWorld.js 안에는

// HelloWorld.js
function HelloWorld() {
  return (
    <h1>Hello world!</h1>
  );
}

export default HelloWorld;

라고 적어준다. 이로써 컴포넌트가 만들어졌는데, 이는 HelloWorld라는 이름을 가지고 Hello world!를 출력하는 기능을 가진 함수이다.

결국 컴포넌트는 자바스크립트 함수인 것을 알 수 있다.

스크립트의 가장 아래에 있는 export default HelloWorld;는 다른 파일에서도 이 함수를 쓸 수 있게 내보낸다는 의미이다.

그리고 App.js에서 import HelloWorld from './components/HelloWorld'라고 위에 써주면 App.js에서 HelloWorld 컴포넌트를 불러온다는 의미이다. 이 과정을 거쳐서야 App.js에서 HelloWorld 컴포넌트를 쓸 수 있다.

만든 HelloWorld 컴포넌트를 쓰기 위해 App.js에

import HelloWorld from './components/HelloWorld'

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;

라고 써준다. return() 안에 있는 HelloWorld가 바로 컴포넌트이고, 이 컴포넌트는 HelloWorld.js에서 작성했던 것처럼 단지 자바스크립트 함수이다.

완성

App.js와 HelloWorld.js를 위와 같이 작성했다면, 아까와 같이Hello, world!가 출력된 동일한 화면을 볼 수 있다.

이렇게 컴포넌트를 분리하면
1. 재사용이 가능하여 반복적인 개발이 줄어들고,
2. 오류를 고치기 쉽다.

컴포넌트 이름의 규칙

App.js를 보면 파일이름인 HelloWorld를 html처럼 사용한 것을 볼 수 있는데, 대문자로 시작한다는 점만 html과 다르다. 컴포넌트는 대분자로 시작하고, html 요소는 소문자로 시작하기 때문에 이 점에서 구분할 수 있다.

그리고 <HelloWorld />는 <HelloWorld></HelloWorld>와 같은 의미이다.

JSX 문법 - 부모요소로 감싸기

App.js의 리턴문에서 HelloWorld 컴포넌트를 여러개 사용한다면 이 요소들을<div></div> 등으로 감싸줘야 한다. JSX를 작성할 때 return문 안에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 하기 때문이다.