2024.06.19 프로그래머스 - React 입문 1

React 알아보기 1

• React 공식 문서 (구) : https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html
• React 공식 문서 (신) : https://ko.react.dev/reference/react

React

• JS SPA 라이브러리
• 페이스북 개발

React의 동작 원리

1. 초기 렌더링
2. 가상 DOM 변경
3. 재조정
4. 실제 DOM 업데이트

React 간단하게 시작하기

npx create-react-app "프로젝트명"
// 또는
npm create vite

React 의 렌더링

• index.tsx

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
      
    const root = ReactDOM.createRoot(
      document.getElementById('root') as HTMLElement
    );
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
      
  

  • React는 index.html 의 id가 #root인 div에 React로 출력하는 DOM을 렌더링 한다.

jsx 문법

• (현재의) React 컴포넌트는 JS의 함수이다.
  • JS 함수 구문을 통해 Markup 문법을 사용하여 엘리먼트 요소를 렌더링하는 함수형 컴포넌트를 사용한다. (구버전 : 클래스 컴포넌트)
  • JSX 는 JS 구문의 확장.

간단한 jsx 구문

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App-header">
      <h1>Hello React</h1>
      <p>반가우이</p>
    </div>
  );
}

export default App;

• JS 함수 안에 return으로 발생하는 HTML 마크업 요소들을 작성하여 화면에 렌더링 할 수 있다.
  • 위와 같은 컴포넌트를 함수형 컴포넌트 라고함

JS 문법 사용

• 함수형 컴포넌트 내부에서 일반 JS 문법을 사용 가능

• return 반환문 안에서는 중괄호 {} 를 사용하여, jsx 문법 및 JS 구문 삽입이 가능하다.

    import React from "react";
    import logo from "./logo.svg";
    import "./App.css";
      
    function App() {
      const date = new Intl.DateTimeFormat("ko");
      
      return (
        <div className="App-header">
          <h1>Hello React</h1>
          <p>반가우이</p>
          <p>오늘 날짜 : {date.format()}</p>
        </div>
      );
    }
      
    export default App;
      
  

  • 마크업 반환 문 안에서 중괄호를 사용하여 JS의 삼항 연산자, 논리 연산 등 JS로 가능한 대부분의 문법이 수행 된다.

JSX 의 특징

• 여는태그는 무조건 닫는 태그를 동반해야 한다.

    <a></a>
    <br />
  

  • self-closing 태그를 사용해도 된다.

• return 안에 두 개 이상의 엘리먼트 작성시, 해당 엘리먼트들을 감싸는 부모 태그가 무조건! 필요하다

  • React.Fragment, 또는 div