React란

Single Page Application 개발도구로 서버로부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 개발할 수 있다.

• 하나의 HTML 페이지로 여러 HTML 페이지가 렌더링 된 것처럼 보이게 한다.
• 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 받아 페이지를 갱신한다.
• 서버 사이드 렌더링도 지원한다.

Flux Architecture

• 상위 요소에서 하위 요소로 단방향 데이터 흐름 아키텍처이다.

JSX

• JavaScript extension
• JavaScript 에서 HTML 문법(마크업구조)을 사용할 수 있게 해주는 extension이다.

프로젝트 생성

npx create-react-app my-app --template=typescript

create-react-app (cra)

• React에서 지원하는 Boilerplate, 즉 프로젝트 초기화 도구이다.
• React 앱을 만들 때 기본적으로 필요한 것들을 제공해주는 npm 패키지이다. (webpack, babel 등)

간단하게 TypeScript로 React 시작 가능

프로젝트 초기 파일

// index.tsx
ReactDom.render(
  <React.StrictMode>
  	<App />
  </React.StrictMode>,
  document.getElementById("root")
  );

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

Component

View를 구성하는 작은 단위로 독립적으로 재사용이 가능한 단위이다.

Props

하나의 컴포넌트에서 다른 컴포넌트로 전달되는 argument

• 상위 컴포넌트가 하위 컴포넌트의 props를 정의해준다. (Flux Architecture)
• 하위 컴포넌트에 대한 props 타입은 interface에서 정의한다.

// component.tsx
import React from "react";

interface MyProps {
  children?: React.ReactNode;
  num: number;
  onClick?: () => void;
}

const Component: React.FC<MyProps> = (props) => {
  const { num, children, onClick } = props;
  return (
    <button
      onClick={onClick}
    >
      {children}
    </button>
  )
}

// App.tsx
import React from "react";
import Component from "./component";

function App() {
  const click = () => {
    alert("Click!");
  };
  
  return(
    <div>
      <Component onClick={click}>
        <div>button</div>
      </Component>
    </div>
  )
}