[React] 프로젝트 생성 및 설정

[0] 개발환경
 - nodejs 설치
 - VSCode 설치

[1] React 프로젝트 생성
 - npx create-react-app 'react-basic'

 - 안될 경우 
 - npm uninstall -g create-react-app
 - npm install -g create-react-app
 - npx create-react-app 'react-basic'

[2] 프로젝트 실행
 - npm start
 - localhost:3000
 - public/index.html의 (id="root")는
 - src/index.js의 document.getElementById('root')에 렌더링 한다. 
 - src/index.js의 <App />은 
 - src/App.js의 function App(){} (App 컴포넌트)의 return안에 있는 내용을 가져와서 출력한다.

[3] 프로젝트 구성 설명
 - node_modules : 라이브러리 폴더
 - public폴더
   └ index.html이 메인페이지 (App.js → index.js → index.html)
   └ static파일 보관함
 - src폴더 : 소스코드 보관함
 - package.json : 설치한 라이브러리 목록

[4] 컴포넌트 설명
 - 리액트(React) 컴포넌트는 React 애플리케이션을 구성하는 기본 단위(UI의 한부분)
 - 독립적이고 재사용 가능한 코드 블록
 - 자체적인 구조, 스타일, 동작
 - 큰 UI를 관리하기 쉬운 작은 단위로 분할하여, 애플리케이션의 코드를 더 효율적으로 관리하고 재사용

 - 클래스형과 함수형 컴포넌트가 있지만 최근에는 함수형을 사용한다.
 - 함수형 컴포넌트 snippet : "rsc" 자동완성

[5] 컴포넌트 활용 알아보기
  (1) App.js

import './App.css';
import Strat from './component/Start';


function App() {

  return (
    <div className="App">
      <Strat />
    </div>
  );
}

export default App;

  (2) Start.jsx

import React from 'react';

const Start = () => {

    // 해당 영역에서는 이와 같이 주석을 사용할 수 있습니다.
    const name = "도깨비";

    // JSX(JavaScriptXML) : 코드 간결, 가독성 좋음
    // JSX를 사용하는 주요 이유 중 하나는 JavaScript 함수 내에서 HTML과 유사한 문법을 사용할 수 있게 함으로써, 
    // 사용자 인터페이스(UI)를 더 직관적이고 선언적으로 구성

    const style = {
        color : "white",
        backgroundColor : "black",
        fontSize : "48px",
        fontWeight : "bold",
        padding : "16px"
    }

    return (
        <div className='start'>
            <h2>이 곳은 Start.jsx 영역입니다.</h2>
            <h2>Start.jsx 내용이 출력됩니다.</h2>

            {/* 주석은 아래와 같이 작성합니다. */}
            {/* {React.createElement('h2', null, `${name}님 반갑습니다.`)} */}
            <h2 style={style}>{name}님 반갑습니다.</h2>
        </div>
    );
};

export default Start;

 

[6] 리액트 레이아웃 + css 적용하기

import './App.css';
import Header from './component/Header';
import Home from './component/Home';
import Footer from './component/Footer';

function App() {

  return (
    <div className="App">
      <Header/>
      <Home/>
      <Footer/>
    </div>
  );
}

export default App;

 

import React from 'react';

const Header = () => {
    return (
        <div className='header'>
            Header.jsx
        </div>
    );
};

export default Header;

import React from 'react';

const Home = () => {
    return (
        <div className='home'>
            Home.jsx
        </div>
    );
};

export default Home;

import React from 'react';

const Header = () => {
    return (
        <div className='header'>
            Header.jsx
        </div>
    );
};

export default Header;

import React from 'react';

const Footer = () => {
    return (
        <div className='footer'>
            <h3>COPYRIGHT © 2024 BY ICIA ALL RIGHTS RESERVED.</h3>
            <h2>프로젝트 기반의 리액트 기초 보수교육</h2>
            <h4>한국기술교육대학교 능력개발교육원 & 인천일보아카데미</h4>
        </div>
    );
};

export default Footer;

* {
    margin: 0;
    text-align: center;
}

.header {
    background-color: lightpink;
    height: 100px;
}

.home {
    background-color: lightblue;
    height: 400px;
}

.footer {
    background-color: lightgreen;
    height: 150px;
}