2. React 의 기본 구조

1. 리액트의 구조

리액트는 기존 js를 확장시킨 jsx(JavaScript XML) 을 사용한다.
JSX를 사용하면 React에서 HTML을 작성하고 추가하는 것이 간단해진다.
JSX를 사용하면 JavaScript 코드 내에서 HTML을 직접 작성할 수 있다.

1.1 폴더 구조

리액트의 폴더 구조를 보면,

• src : 소스코드가 들어있는 곳.
• assets : 이미지와 같은 리소스들이 들어가는 곳(컴포넌트 내부에서 import 하여 사용하는 이미지 등)
• public : 정적 파일들이 들어가는 곳.(HTML 파일에서 직접 참조하는 파일 등)

---

1.2 App.jsx (UI, 페이지 구성 등 실제 컴포넌트 내용을 정의)

import './App.css'
import React from "react";

// html 태그 자체를 넣을수도 있고, 그것을 요소 자체로 출력할 수도 있다.
// 이 형태를 html + js + xml 이 섞인 형태라 하여 jsx 템플릿이라 한다.
// const html = <h3>Hello, React.js</h3>;

// 컴포넌트는 함수형태 또는 클래스 형태로 표현된다.
// 함수 컴포넌트 : 가장 널리 사용되는 형태.
// 클래스 컴포넌트보다 기능이 없지만, hooks 를 통해 많이 개선되었다.
/*function App() {
    // 밖으로 내보낼 내용.
  return (
   <div>{html}</div>
  )
}*/

// react.js 에서 사용하라고 한때 권고했으나, 현재는 권고까지는 아님
class App extends React.Component {
    render() {
        // {} 표시는 return 문 안에서 특정 변수의 내용을 사용하겠다는 뜻.
        return (<h3>Hello, React.js</h3>);
    }
}

export default App



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

class App extends Component {
    constructor(props) { // 클래스라 생성자가 존재한다.
        super(props);
        console.log(props);
    }

    // 여기서도 변수 선언이 가능
    name = 'kim'; // 얘는 클래스 필드라고 봐야함. 따라서 아래서 this로 접근

    render() { // render 함수의 존재가 함수형과 클래스형의 차이를 준다.
        // 여기서 변수 선언이 가능
        const gender = '남자';
        let age = '30';

        return (
            <>
                {this.name}/{gender}/{age}
            </>
        );
    }
}


function App2() {
    // 변수(let, const, var)
    let name = '홍길동';
    const gender = '남자';
    let age = 30;

    // 본래 js 에서는 html 태그는 문자열로 저장해야 했다.
    let js = '<h3>Hello, JSX</h3>';
    // jsx 에서는 html 태그를 그대로 넣을 수가 있다.
    let jsx = <h3>Hello, JSX</h3>;

    // return 은 반드시 하나의 태그로 묶여 있어야 한다.
    return (
        <>{/* 만약에 의미있는 태그로 묶기 싫다면 아무런 의미 없는 태그로 묶어도 된다. */}
            {/* 변수를 표현할 때는 {} 안에 표현해 준다. */}
            {name}/{age}/{gender}<br/>{/* 단일 태그라도 / 로 마무리 해주지 않으면 에러 발생 */}
            {js}
            {jsx}
            <div>
                {/* return 문 안에서는 if 문 사용이 불가능하다. */}
                {/* 대체 방법 1. 3항 연산자 */}
                {1 + 1 === 2 ? (<p>1+1 은 2 입니다.</p>) : (<p>1+1 은 2가 아닙니다.</p>)}
                {/* 대체 방법 2. 익명 함수 */}
                {
                    (() => {
                        if (age === 10) {
                            return <div>10대 입니다.</div>;
                        }
                        if (age === 20) {
                            return <div>20대 입니다.</div>;
                        }
                        if (age === 30) {
                            return <div>30대 입니다.</div>;
                        }
                    })()
                }
            </div>
        </>
    );
}

export default App; // 이 jsx 파일을 대표하는 기본 컴포넌트 선언

---

1.3 main.jsx (리액트 앱을 DOM에 렌더링해주는 시작 파일)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css' // css 불러오기
import App from './App.jsx' // App.jsx 에서 모듈을 불러온다

// root 에 그린다
createRoot(document.getElementById('root')).render(
  <StrictMode> {/*엄격한 문법 모드(자체 로그를 찍는다)*/}
    <App /> {/* App 함수 또는 클래스의 컴포넌트를 의미한다 */}
  </StrictMode>,
)