[우아한테크러닝 3기 : React&TypeScript] 1일차 - Overview

강의 목표 

도구

다양한 도구가 생산성 향상에 도움을 주는 시대 → 고민의 관점이 달라짐

언어적인 도구 : TypeScript

UI Framwork 도구 : React

 

(상태 State)
환경 (Env)
제품 Prod;
목표 (Mission)) 
코드 (Quality]
상대적 {E=mc2}

"미션을 잘 이해하는게 도구를 잘 쓰는 비결"

Best Practice

 

모든 것은 상대적이다. 위의 5가지 키워드를 다 아우르는 키워드.

 

 

TypeScript playground www.typescriptlang.org/play

codeSandbox https://codesandbox.io/index2

Blueprint.js https://blueprintjs.com/ UI toolkit - typescript로 만들어짐. 컴포넌트, 코드 구조 등에 도움될만한 라이브러리

Testing Library https://testing-library.com/  - 테스트 시 활용

React / Redux / MobX / Redux-saga 다룰 예정(generator, async 등 언급될 예정)

 

 

1. TypeScript

타입 명시 

let foo = 10; // 타입 추론을 통해 number로 세팅
let foo: number = 10 // 타입을 명시적으로 세팅
foo = false; // 타입 에러 발생

 

코드가 길어지더라도 암묵적인 것보다, 명시적인 것이 낫다. 점점 이런 경향으로 가고 있다.

타입을 강제해서 실수 할 수 있는 부분을 사전에 방지한다.

 

*기본 타입은 여기 참고

 

Type Alias

 

Primitive Type은 일반화 되어있어 다양한 용도로 사용할 수 있다는 장점이 있다. 재활용성에 있어서 좋다.

타입스크립트에서는 이러한 타입에 의미를 좀 더 부여하고자 할 때, Type Alias라는 것을 이용하여 의미가 부여된 이름을 줄 수 있다. 

이렇게 만들어진 Type Alias는 컴파일 시에만 의미가 있다. 최종적인 type은 결국 Primitive Type 인 것.

type Age = number;

let age: Age = 10;
let weight: number = 72;

 

객체도 하나의 타입으로 만들 수 있다.

type Age = number;

type Foo = {
  age: Age;
  name: string;  // ;으로 끝나는 것이 일반 객체와 다르다는 점 
}

const foo: Foo = {
	age: 10,
    name: 'kim'
}

 

Interface

 

위의  타입 알리아스와 인터페이스는 유사하다. 하지만 둘은 다르다. 차차 알아가는 것으로.

type Age = number;

interface Bar {
  age: Age;
  name: string;
}

const bar: Bar = {
  age: 10,
  name: 'kim'
}

 

 

2. React 설치

npx create-react-app <<프로젝트명>> --template typescript

템플릿을 타입스크립트로 설치해줘야 타입스크립트를 사용할 수 있다. 

 

CRA(Create-react-app) 장단점

장점 _
간단하고, 왠만한 건 다 세팅 되어있다. (그 외에는 다 단점)

단점 _
CRA 개발한 사람들이 보수적이라, 개선사항을 잘 안받아준다.
다양한 환경에 대한 대응이 어렵다. → 여러 환경으로 빌드되어야 하는 경우, local, product만 지원을 하고 다른 것은 확장 불가능함. 실제 프로덕트 개발을 할때는 웹팩으로 구성을 하는 것을 추천함. eject로 풀어서 커스터마이징이 가능하기는 한데 복잡하므로 권장하진 않음.

 

Render()

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <h1>Tech Hello?</h1>
  )
}

ReactDOM.render(
  <React.StrictMode> // 스트릭트 모드는 개발시에만 지원됨
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

리액트는 React component와 Html 컨테이너 두 개의 인자를 받아서 render 메소드를 실행하는 방식이다. render()는 최상위에서 한 번만 호출된다. 

 

function App() {
  return (
    <h1>Tech Hello?</h1>
  )
}

위의 코드를 babel.io에서 컴파일해보면 아래와 같다.

실제로는 리액트가 제공하는 메소드(react.default.createElement())를 통해 화면에 그려진다는 것을 알 수 있다.

function App() {
  return /*#__PURE__*/_react.default.createElement("h1", null, "Tech Hello?");
}

 

Props

import React from 'react';
import ReactDOM from 'react-dom';

//props의 타입을 지정
interface AppProps {
	title: string;
    color: string;
}

function App(props: AppProps) {
  return (
    <h1>{ props.title }</h1> // 일반 텍스트와 구분하기 위해 {}안에 스크립트를 넣음
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App title="hello?" color="blue" /> // props를 이용해서 데이터를 전달할 수 있음
  </React.StrictMode>,
  document.getElementById('root')
);

 

상태 관리

Flux

아키텍처 쓰기 불편 immutable한 (전역)상태를 지향함

*Flux:  Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐. 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할(참조)

 

Redux

출현하면서 정형화되고 심플한 라이브러리를 제공

 

MobX

편리하고 안정성 있음. 다양한 유형의 Practice들이 있음.