React - 컴포넌트와 JSX

01. 컴포넌트

 

(1) React Components란 무엇일까요?

 

(1)-1. 컴포넌트 개념 이해하기

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

 

(1)-2. 리액트 컴포넌트를 표현하는 두 가지 방법

1. 함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현
function App () {
	return <div>hello</div>
}

 

2. 클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

두 가지 모두 기능상으로는 동일하지만, 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하고 있습니다.

 

결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)는 즉 함수 입니다. 누군가 와서 “컴포넌트를 만들어 보세요" 라고 한다면 우리는 html 처럼 생긴 jsx를 return 하는 함수를 만들면 됩니다.

 

(2) 만든 Vite 프로젝트 살펴보기

 

(2)-1. 코드 살펴보기

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

 

 

(2)-2. 컴포넌트 보는 방법

 

컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편합니다. 컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default 라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있습니다.

 

컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있습니다. 여러분이 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 여기에다가 작성합니다.

 

 

(2)-3. 주의사항

• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 합니다.
• 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓습니다.

 

02. 부모 - 자식 컴포넌트

 

리액트에 존재하는 모든 UI 요소들은 컴포넌트라고 했습니다. 각 컴포넌트는 위치하는 곳에 따라 부모 컴포넌트 - 자식 컴포넌트의 관계를 갖기도 해요.

 

(1) 컴포넌트 안에 컴포넌트 넣기

 

컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부릅니다.

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

 

App.js 파일 안에서 Child라는 새로운 컴포넌트를 만들었습니다. 그리고 Child 컴포넌트를 App 컴포넌트에서 마치 HTML 태그를 쓰듯이 넣었습니다. 이렇게 한 컴포넌트 안에 다른 컴포넌트를 넣을 수 있습니다.

 

이렇게 코드를 작성하면, 화면에는 “나는 자식입니다” 라는 문장이 보여지게 될 것 입니다. 왜냐하면 이 파일에서 내보내진 (우리는 “내보내진” 이라는 것을 export default 라고 하기로 했습니다.) 컴포넌트는 App 컴포넌트 이기 때문에 App 컴포넌트가 화면에 보여집니다. 하지만 App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있죠! 그래서 결국 자식 컴포넌트에 있는 “나는 자식입니다" 라는 문장이 보여지게 되는 것입니다.

 

이렇게 만들어진 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있습니다. 앞으로는 “화면에 보여지게 하다"를 줄여서 Rendering 이라고 부르겠습니다. 그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식이 JSX입니다.

 

03. JSX

 

(1) JSX란 무엇일까요?

 

JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법

 

HTML을 품은 JS ⇒ JSX!

아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없어요.

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

 

그래서 나온 게 JSX입니다. 자바스크립트 안에서 html 태그 같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있습니다!

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

 

브라우저는 JS만 해석 가능하고 브라우저는 jsx 파일을 직접 해석할 수 없습니다. 따라서 babel을 이용하여 jsx를 js로 변환합니다.

 

[변환 전] - 우리가 보는 jsx 파일

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

 

[변환 후] - 브라우저가 보는 js 파일

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);