우아한 테크 3기

현유진·2020년 9월 1일

React typescript

도구

보통 개발 도구를 선택할 때 우리는

어떤 라이브러리가 좋은가?
어떤 방식으로 만들어진 라이브러리가 좋은가?

를 생각한다.

요즘 시대에는 "도구"를 익혀서 개발하고 있다!!!

키워드

상태(state)
환경(Env)
제품(Prod) - 개발자의 관점에서 상세하게 볼 수 있어야 한다.
목표(Mission) - 어떤 문제를 해결하고 달성하는 목표
코드(Quality)
상대적(E = mc2)

필요 링크

https://www.typescriptlang.org/play
https://codesandbox.io/index2
https://reactjs.org/
https://redux.js.org/
https://mobx.js.org/README.html
https://redux-saga.js.org/
https://blueprintjs.com/
https://testing-library.com/

Typescript

Type 명시
Typescript는 컴파일러가 type을 추론해서 type을 세팅해준다.

type Age = number;

// let foo : Age = 10;

type Foo = { // Type Alias 방식
    age : Age;
    name : string;
}

interface Bar { // Interface 방식
    age : Age;
    name : string;
}

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

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

typescipt에서 : number 이거는 일반화 되어있다.

Type Alias <-> Interface 는 사용방식이 같은데 뭐가 다를까?

둘은 사용 방식도 비슷하고 비슷한 기능을 하는데 react를 배우면서 더 자세하게 알아보도록 하자!

React

프로젝트 Setting
create-react-app으로 손쉽게 설치 가능하다.

yarn create react-app tech-hello --template typescript

--template(보일러플레이트)로 초기 Setting을 해준다.

tsconfig.json
Typescript 컴파일러에 option을 줘서 Javascript superset을 조정한다.
index.tsx
React 컴포넌트는 기본적으로 function으로 만들 수 있다.

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

// react에서 component 만들기
interface AppProps {
  title : string;
  color : string;
}

function App(props : AppProps) { // props로 객체 형태로 전달
  return (
    <h1>{ props.title }</h1>
  )
}

ReactDOM.render( // ReactDOM은 최상위에서 한번만 선언해주면 된다.
  <React.StrictMode>
    {/* 컴포넌트에 props로 data 전달해주기 */}
    <App title="Hello Tech" color="red" />
  </React.StrictMode>,
  document.getElementById('root')
);