TIL 2021.01.09

What is React

• Component에 대해 선언적 사용이 가능한 JS 라이브러리

• Single Page Application (SPA) 개발도구

  서버로부터 완전한 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. (Wikipedia)

  • 한 HTML 페이지로 여러 HTML 페이지가 렌더링 된 것처럼 보이게 함
  • 배포가 간단해짐
  • 최초로 한번 모든 정적 리소스를 다운로드하고, 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신함.
    • 트래픽 감소, 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않음
    • 네이티브 앱과 유사한 UX (모바일 퍼스트)
  • SPA는 JS 기반 비동기 모델(클라이언트 렌더링 방식)이지만 React 프레임워크는 서버 사이드 렌더링도 지원

• Flux Architecture

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

• JSX : JavaScript eXtension

  • JS에서 HTML문법을 사용할 수 있게 한 extension
  • 마크업 구조를 HTML페이지 대신 JS/TS에서 사용할 수 있게 함
  • 원리상 React.createElement() 호출하여 컴파일 됨

Why React?

• 쉽게 재사용 가능한 컴포넌트
• HTML 문법 그대로 선언적 사용이 가능
• Fast Render Using Virtual DOM
• Clean Abstraction
  • Lifecycle, State, Props
  • view layer만 이해하면 된다
• Flux Architecture
• Wide Community
• React Native

초기 세팅 및 실행

• React-TypeScript

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

npm install -S styled-components react-router-dom dotenv
npm install --save-dev @types/styled-components babel-plugin-styled-components @types/react-router-dom
npm install -D gh-pages
npm audit fix

# npx 대신 npm install -g (전역) 도 ok

프로젝트 생성

npx create-react-app <appname> --template=typescript
cd appname
npm start

create-react-app (cra)

• React에서 지원하는 Boilerplate (프로젝트 초기화 도구)
• React앱을 만들때 기본적으로 필요한 것들을 제공해주는 npm의 패키지 : webpack, babel, dev server
• 프로젝트 이름은 소문자로 시작
• 전역으로 깔았다면 npx 명령없어도 됨

프로젝트 초기 파일

// index.tsx
  ReactDOM.render( 
    <React.StrictMode>
      <App /> 
    </React.StrictMode>,  
    document.getElementById("root")
  );
  // ReactDOM이 위 태그들을 해당 root DOM에 Render한다.
  // <App/> 실제로 화면에 나타나는 컴포넌트

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

Component

• view를 구성하는 작은 단위 Nesting & Configuration
• 독립적으로 재사용이 가능한 단위 Reusability
• 대문자로 시작

Props

• 하나의 컴포넌트에서 다른 컴포넌트로 전달되는 argument
• 상위 컴포넌트가 하위 컴포넌트의 Props를 정의해준다.
  • (하위를 포함하는) 상위에서 하위로만 전달할 수 있다 : Flux Architecture
• 하위 컴포넌트에 대한 Props 타입은 interface 로 정의한다.
• 이벤트 핸들러도 전달 가능
• 코드 예시
  • 하위 컴포넌트 파일
    • Props 타입 명시, 컴포넌트 정의
  • 상위 컴포넌트 파일
    • Props 전달

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

  //* Props 타입 명시
  // 컴포넌트가 상위 컴포넌트로 부터 어떤 속성을 전달받을 지에 대한 props 정의
  interface ButtonProps {
    children?: React.ReactNode;
    width: number; //상위 요소가 버튼의 width를 수정할 수 있게함
    onClick?: ()=> void;
  }

  const Button: React.FC<ButtonProps> = (props) => {
    // React.FC (React의 함수형 컴포넌트)
    const { width, children, onClick } = props; // props 객체
    return (
      <button
        style={{
          width: `${width}px`,
          height: "30px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
              onClick = {onClick}
      >
        {children}
      </button>
    );
  };

  export default Button

  // App.tsx
  import React from "react";
  import Button from "./component/button";

  function App() {
      const alarm = () => {
      alert("Hi~");
    };

    return (
      <div>
        <Button width={100} onClick={alarm}>
          <div>This is Button</div>
        </Button>
      </div>
    );
  }

  //* Props 전달
    // App에서 Button으로 props 전달
    // Button의 하위 요소로도 전달 가능
    // 상위에서 하위로 전달되는 구조
    // JSX로 작성

공식 문서: https://ko.reactjs.org/docs/react-api.html