[React] 컴포넌트 구조 - JSX영역/함수영역/Fragment 사용법

React를 구성하는 중요 파일

react로 프로젝트 구축을 할때 중요한 3개의 파일에 대해 알려드리겠습니다.

리액트는 컴포넌트 구조*로 이루어져있습니다.

컴포넌트 타입에는 함수형과 클래스형이 있습니다.

오늘 설명드릴 내용은 '함수형'을 통한 예제입니다.

 

😎 컴포넌트란?

UI를 독립적이고 재사용 가능하도록 나눈 조각, 기능을 단위별로 캡슐화 한 단위를 말합니다.

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />	<!-- 컴포넌트 불러오기 -->
  </React.StrictMode>,
  document.getElementById('root')
);
//root 라고 하는 실제 DOM에다 갖다 붙여라 

reportWebVitals();

src 폴더에 포함되어있는 파일입니다. 작업한 화면이 이곳에서 실제 표시합니다.

index.js에서는 실제 작업을 하지않고, 작업한 코드를 불러오는 역할을 합니다. 

예제에서는 App.js의 App 컴포넌트를 불러왔습니다. →  부분</App >

Test2.js

import React from 'react';

const Test2 = () => {
    
    //함수 영역
    const title = '신상 명세서';
    const name = '강호동';
    const age = 20;

    return (
        <Fragment>
            <h2>JSX 영역 변수 사용 : {title} </h2>
            {/* JSX 영역에서 자바스크립트의 값을 출력할경우에는 반드시 {} 안에 써야한다. */}
            <ul>
                <li>이름 : {name} </li>
                <li>age : {age} </li>
            </ul>
        </Fragment>
    );
};

export default Test2;

 

컴포넌트는 함수영역과 JSX영역으로 나누어진다.

JSX영역이 실제 화면에 그러지는 코드

JSX영역 -  처음 시작은 주로 <div></div>로 감싸준다.
혹은 <Fragment> </Fragment> 사용할수있다. 

한줄은 상관이 없지만 그 이상은 반드시 그룹형 또는 div로 묶어야한다.
Fragment = 그룹
Fragment의 경우, Fragment 지우고 <> </> 이렇게 표현 가능