[React] 리액트의 컴포넌트를 알아보자

2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축

2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정

2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트에서 사용하는 JSX

---

1. 컴포넌트란 무엇인가?

 리액트의 알파이자 오메가인 컴포넌트는 한마디로 "레고 블록"이라고 생각하시면 됩니다.

내가 필요한 여러 블록을 만들어 놓고, 그것을 조립 조합하여 완성된 제품을 만듭니다.

 

웹페이지에 블럭을 끼어맞추는 느낌 

2. 간단한 컴포넌트 구현

 전에 포스팅했던 [리액트에서 사용하는 JSX]를 기반으로 작성해보겠습니다.

먼저 본인의 프로젝트 루트폴더(여기서는test_project)의 src폴더 안에 components폴더를 만들고

그 안에 GoogleLove.jsx 파일 생성 후(첫 글자는 대문자), 아래와 같이 코딩해봅니다.

 

// ..\test_project\src\components\GoogleLove.jsx

import React, { Component } from "react";
import "./../App.css";

class GoogleLove extends Component {
  render() {
    const imgSrc =
      "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
    const divtext = <h3 className="title">구글 사랑합니다!</h3>;
    return (
      <div className="googleLove-container">
        <img src={imgSrc} />
        <div>진짜 {divtext} 정말</div>
      </div>
    );
  }
}

export default GoogleLove;

 

 전에 포스트했던 내용과 크게 다르지 않고, App.css 임포트(폴더구조 주위) 및 스타일 추가해봤습니다.

이걸로 구글을 사랑한다는 블록이 완성됐으니, Main이라고 할 수 있는 App.js (사실 이것도 컴포넌트)를 수정합니다.

 

// ..\test_project\src\App.js

import React, { Component } from "react";
import "./App.css";

// 컴포넌트 불러오기 (확장자는 생략가능)
import GoogleLove from "./components/GoogleLove";

class App extends Component {
  render() {
    return (
      <div className="body">
        <h1 className="title">구글 사랑 컨퍼넌트</h1>
        <GoogleLove /> {/* 컴포넌트 추가!!! */}
      </div>
    );
  }
}

export default App;

 

 아까 만든 GoogleLove 컴포넌트를 임포트 하고, JSX 마크업 방식으로 추가했습니다.

여기서 중요한 것은 HTML태그와의 혼동을 피하기 위해 컴포넌트 이름의 첫 글자는 대문자로! 

참고로 JSX안에서 코드 주석처리는 { /* 주석내용 */ }

 

오늘은 여기까지 입니다~ 참 쉽죠?

---

2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티