[React] 리액트 컴포넌트, jsx 문법

1. 컴포넌트

1.1 컴포넌트

컴포넌트란 앱 구성의 최소한의 단위이며, 레고블럭을 조립하듯이 컴포넌트의 조합으로 새로운 페이지를 생성할 수 있다.
하나의 독립적인 컴포넌트를 만들면, 재사용과 유지보수가 쉽다.
컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수이다.

1.2 컴포넌트의 종류

리액트에서 정의하는 컴포넌트 종류는 크게 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있다.

❓ 클래스형 컴포넌트 vs 함수형 컴포넌트

• 클래스형 컴포넌트
  • 더 많은 기능 사용 가능
  • 코드가 더 길고 복잡함
  • 성능이 느림
• 함수형 컴포넌트
  • 더 적은 기능
    • 리액트 16.8 이후부터 hook 지원 → 다양한 기능 사용 가능
  • 코드가 더 짧고 간단함
  • 성능이 빠름

1.3 컴포넌트 사용하기

1.3.1 컴포넌트 만들기

// Hello.js

import React from 'react'; // 리액트를 불러오기

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello; // Hello라는 컴포넌트를 내보내기 -> 다른 컴포넌트에서 불러와서 사용 가능

1.3.2 다른 컴포넌트에서 불러와서 사용하기

// App.js

import React from 'react';
import Hello from './Hello';

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

export default App;

1.3.3 재사용하기

컴포넌트는 일종의 UI 조각이다. 그리고, 쉽게 재사용 할 수도 있다.

import React from 'react';
import Hello from './Hello';

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

export default App;

1.4 컴포넌트가 어떻게 실제 화면에 보여질까?

• ReactDOM.render
  • 컴포넌트를 페이지에 렌더링하는 역할.
  • 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입한다.
  • 즉, 렌더링 → HTML 마크업 →DOM 주입의 과정이 수행된다.

// index.js

import React from 'react';
import ReactDOM from 'react-dom'; 
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root')); // 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

// index.html

<div id="root"></div> // id가 root인 div 내부에 렌더링된다.

2. JSX

2.1 JSX

JavaScript의 확장 문법으로, 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 개발이 용이하다.

return <div>안녕하세요</div>;

리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JavaScript 로 변환을 해준다.

❓ Babel

Babel은 자바스크립트의 문법을 확장해주는 도구이다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 한다.

2.2 JSX 문법

import React from 'react';
import Hello from './Hello';

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

export default App;

• 두 개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 한다.
• 태그는 꼭 닫혀있어야 한다.
• 리액트 Fragment : <></>, 브라우저 상에 실제 엘리먼트로 나타나지 않음. 리액트 컴포넌트는 반드시 하나의 태그로 감싸져 있어야 하는데, 단순히 감싸기 위한 목적으로 불필요한 div를 사용하는 대신 Fragment를 사용할 수 있다.
• 인라인 스타일은 객체 형태로 작성해야 하며, 스타일 속성 이름은 카멜케이스(background-color -> backgroundColor)로 작성해야 한다.

const style = {
    backgroundColor: 'black',
    fontSize: 24
  }

 <div style={style}>{name}</div>

• css class는 class 대신 className 으로 작성.
• JSX 내부 주석은 {/* 이 안에 */} 작성. (중괄호로 감싸야 함)
• 태그 안에서는 // 주석 사용 가능. (<Hello //주석 />)
• JSX 내부에 자바스크립트 변수나 값을 보여줘야 할 때에는 {} 으로 감싸서 보여준다.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

3. Props

3.1 Props

• props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
• props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
• 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

3.2 Props 사용하기

3.2.1. props를 사용한 렌더링

• 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.

//App.js
import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App() {
  return (
    <div>
      <Header />
      <Main name="갓대희" color="blue"/>
      <Footer />
    </div>
  );
}

export default App;

//Main.js
import React from 'react';

function Main(props) {
    return (
        <div>
            <main>
                <h1 style={{color: props.color}}>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

3.2.2 비구조화 할당

• 객체에서 값을 추출하는 문법. 내부 값을 바로 추출하며, 함수의 파라미터 부분에도 사용 가능하다. 파라미터가 객체라면 그 값을 바로 비구조화해서 사용한다.

import React from 'react';

function Main({name, color}) { // props 대신 비구조화 할당
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

3.2.3 defaultProps 로 기본값 설정

• defaultProps : 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값 설정.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>}

Hello.defaultProps = {
  name: '이름없음'
}

3.2.4 props.children

• props.children : 하위 컴포넌트를 조회하고 싶을 땐 props.children 을 사용한다.

return <div>{props.children}</div>;

참고자료

1주차_Component, JSX 와 Props (4)
5. props 를 통해 컴포넌트에게 값 전달하기
[React] 리액트 개념 정리
[React] 4. React 컴포넌트(2) - 프로퍼티(props)란?
[ REACT ] 컴포넌트, props 사용하기