[우아한테크러닝 React&TypeScript] 1회차

1회차라고 편한 마음으로 필기 없이 들었는데 생각보다 너무 유익해서 정리하기로 결정.

고맙게도 많은 분들이 이미 정리를 잘해주셔서 베껴왓다ㅠ_ㅠ

2회차 부터는 필기 열심히 해야지...

 

그 중 아래 3분의 내용을 많이 참고했다. 링크 걸어드려야지.

https://github.com/alstn2468/Woowa_Tech_Learning_React_Typescript/blob/master/ms/week_1/Tuesday.md

alstn2468/Woowa_Tech_Learning_React_Typescript

https://blog.naver.com/zoz0312/222077562048

[React&TypeScript] 1회차

https://github.com/nomelancholy/hello-world-projects/tree/master/woowa-react-typescript

nomelancholy/hello-world-projects

강의목표

나는 과연 잘하고 있을까?

네트워킹.

현 수강생들이 가장 많이 고민하는 부분 - 코드 품질, 아키텍처, 적정기술 선택

최근의 프로그래밍 학습 방법은 도구를 학습하는 것.

그 도구의 일환인 React, TypeScript 등 사용하는 방법을 학습한다.

이번 강의동안 사용할 도구들

Typescript Code 테스트 할 수 있는 링크  https://www.typescriptlang.org/play
Code Sandbox  https://codesandbox.io/index2
React  https://reactjs.org/
Redux 상태 관리 라이브러리  https://redux.js.org/
MobX 또 다른 상태 관리 라이브러리  https://mobx.js.org/README.html
UI 템플릿 라이브러리  https://blueprintjs.com/
Jest와 비슷한 테스팅 라이브러리  https://testing-library.com/

강의에서 주로 다룰 키워드

• 상태 (State) : 어플리케이션은 즉 상태를 관리하는 것이 주 목표
• 환경 (Env) : 많은 환경에 대한 대응 및 개발 환경에 대한 관심
• 제품 (Product) : 개발을 하는 것뿐만 아니라 제품적인 측면으로 생각
• 목표 (Mission) : 많은 도구를 조합해 만드는 제품이 해결할 미션
• 코드 (Quality) : 코드의 퀄리티를 높일 수 있는 방법
• 상대적 (E=mc^2) : 위에 있는 모든 것은 사람마다 상대적

TypeScript

타입을 지정하는 방법

let foo = 10; //암시적 방법
let foo: number = 10; //명시적 방법

암시적 방법을 사용하면 TypeScript가 타입 추론을 통해 타입을 지정하게 됨.

명시적 방법을 사용하는것이 직관적이고 좋다.

Type Alias

type Age = number; //별칭 지정

let age: Age = 30;
let weight: number = 45;

타입의 별칭을 지정해서 해당 타입에 의미를 부여하고 가독성을 높일 수 있다.

Object와 Interface

type Age = Number;

type Foo = {
  age: Age;
  name: String;
}

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

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

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

객체 타입을 지정하는 방법은 두가지가 있는데 type 키워드와 interface 키워드가 있다. 두 가지 방식이 거의 같아 보이지만 TypeScript에서 권장하는 사용법과 기능적인 미묘한 차이가 있다고 한다.

React&TypeScript 프로젝트 생성

yarn create react-app tech-hello —template typescript

create-react-app을 통해 프로젝트 생성.

- 이 간편생성 방식은 실무에서는 추천하지 않는다. 웹팩이나 다른 추가 종속성 작업시 헬게이트 열림 (feat. eject)

코드 수정하기

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')
);

src/index.tsx 파일을 위와같이 수정한다.

ReactDom의 render함수는 가상돔에 컴포넌트를 그리는 함수이며 두 개의 인자를 받는다.
첫 번째인자는 렌더링될 컴포넌트며 두 번째 인자는 렌더링된 컴포넌트를 넣을 HTML 요소다.

실제 변환되는 컴포넌트 모습

App 컴포넌트를 babel을 통해 트랜스파일링 해보면 아래와 같다.

// 변환 전
function App() {
    return <h1 id="header">Tech Hello!</h1>;
}

// 변환 후
function App() {
    return /*@__PURE__*/ React.createElement(
        "h1",
        {
            id: "header",
        },
        "Hello Tech"
    );
}

(위)JSX문법으로 작성한 코드는 (아래)React에서 제공하는 createElement 함수를 통해 실제 엘리먼트가 만들어진다.

첫번째 인자: 태그명 / 두번째 인자: 속성(props) / 세번째 인자: 자식 요소

React앱에 TypeScript 사용하기

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

interface AppProps {
  title: string;
  color: string;
}

function App (props: AppProps) {
  return (
    <h1>{ props.title }</h1>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App title="This Props Title" color="red"/>
  </React.StrictMode>,
  document.getElementById('root')
);

App 컴포넌트에 넘겨줄 속성들에 대한 타입을 interface로 정의하고 AppProps라는 별칭을 지정해주었다.

React.StrictMode는 React 개발에 도움을 주는 인포들을 알려준다.

상태 관리

여러 컴포넌트가 관심 갖는, 전역 State를 관리하기 위해 처음으로 등장한 건 Flux다.

Redux

flux를 개선하고 정형화 한 것. 매우 간단하게 사용 가능하다.

Mobx

redux와 1:1로 비교하기 힘들만큼 다른 패러다임으로 접근하지만 상태를 관리하는 또 다른 라이브러리.

기능이 많고 그만큼 응용 범위가 넓다.