우아한 테크러닝 3기 React & TypeScript 1회차

Happy_Nerd·2020년 9월 14일

React mobx redux typescript 우아한테크러닝

우아한 테크러닝 3기

목록 보기

1/4

우아한 테크러닝 강의 1회차 (2020.09.01)

Typescript

암묵적 타입 지정 & 명시적 타입 지정

암묵적 타입 지정

let foo = 10;
foo = false;  // 에러 발생

타입을 지정하지 않고 쓰는 자바스크립트에서는 값을 넣으면 타입 추론을 통해 암묵적으로 타입을 대입한다.

위처럼 10이라는 값을 넣어주면서 foo에 number라는 타입이 암묵적으로 대입되었는데 밑에서 false(boolean)를 넣으면 number가 아닌 다른 타입이 들어오는 것과 같기 때문에 에러가 발생하게 된다.

2. 명시적 타입 지정

let foo: number = 10;

변수명: 타입 처럼 써서 타입을 명시적으로 지정할 수 있다.

요즘 코딩 스타일이 암묵적인 것보다는 명시적인 것을 선호하고 있어서 타입스크립트 사용을 더 선호하고 있다.

Type Alias

type명을 개발자가 원하는 이름으로 설정할 수 있다.

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

이렇게 해도 age와 weight가 number 타입이라는 걸 볼 수 있지만 좀 더 좋은 가독성을 위해 type명에 별칭을 지정할 수 있다.

// type명을 Age로 하고 number 타입을 부여함
type Age = number;  

// Age 타입으로 설정했는데 number로 설정한 것과 같음
let a: Age = 10;  
let weight: number = 72;

이렇게 하면 a변수가 나이를 나타내는 변수라는 것과 그것이 number 타입을 가지고 있다는 것을 한눈에 확인할 수 있다.

### 컴파일 타임(Complie Time)과 런 타임(Run Time)

compile time : 개발자에 의해 소스코드가 작성되고 컴파일 과정을 통해 컴퓨터가 인식할 수 있는 기계어 코드로 변환되며 실행 가능한 프로그램이 되어가는 과정

run time: 컴파일 과정을 마친 프로그램이 사용자에 의해 실행될 때의 환경 또는 시간

타입스크립트에서는 컴파일 타임에서만 작동하는 문법들이 있다.
그 중 하나가 Alias를 지정하는 것이다.

모든 문법이 컴파일 타임에만 작동하는 것은 아니고 컴파일 타임에만 작동하는 것과 런타임에 작동하는 것이 따로 있다.

babel 사이트에서 alias를 지정하는 코드를 작성하고 변환된 코드를 보면 해당 내용이 없는 것을 볼 수 있다.

// 컴파일 타임에만 작동하는 문법 요소.
type Age = number;  

// 변환되어도 나오는 코드
let a: Age = 10;
let weight: number = 72;

객체 타입

객체 타입도 만들 수 있다.
만들고자 하는 객체와 동일한 구조로 타입을 선언해서 만들면 된다.

type Foo = {
    age: number;
    name: string;
}

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

Foo라는 객체 타입으로 변수를 만들기 위해서는 numer타입의 age와 string타입의 name을 가지고 있어야 에러 없이 만들 수 있다.
또한 객체 타입 내부의 속성에도 type alias를 지정할 수 있다.

Type Alias와 Interface

type Foo = {
    age: number;
    name: string;
}

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

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

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

type으로 만드는 것과 interface로 만드는 것은 차이점이 있는데 언제 타입알리아스를 쓰고 인터페이스를 쓰는지는 나중에 다시 언급해주시기로!

React & Typescript 프로젝트 생성하기

수업에서는 yarn을 사용해 프로젝트를 생성했다.

yarn create react-app 프로젝트이름 --template typescript

create react-app

create-react-app 은 맨 처음에 간단하게 시작할 수 있다는 장점이 있지만 그 외에는 다 단점이라고 생각한다고 하셨다ㅋㅋ

다양한 환경에 대응하기에 어려움이 있고, production용으로는 사용하는걸 권장하지 않는다고 한다.
하지만 테스트나 학습, 토이 프로젝트용으로 적합하다고 한다!

jsx

** jsx문법을 사용하기 위해서는 상단에 react를 필수적으로 import 시켜야 한다.

jsx문법
return 시 <h1>hello</h1> 와 같이 작성하여 리턴함.
html코드처럼 보이지만 react element를 생성하는 코드!

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

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

실습

src/index.tsx

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

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

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

ReactDOM.render(
  <React.StrictMode>
    <App title="Tech Hello?" color="red" />
  </React.StrictMode>, 
  document.getElementById('root')
)

ReactDom의 render()함수는 가상돔(virtual dom)에 컴포넌트를 그리는 함수인데, 첫번째 인자로는 리액트 컴포넌트를 받고 두번째 인자로는 컴포넌트를 그릴 위치를 받는다.
Dom render는 최상위에서 한번만 호출된다.

App 컴포넌트를 가져올 때 title, color라는 props를 전달해 가져온다.
App 함수에서는 전달받은 props를 사용할 수 있다.

위에서는 그 props들을 interface로 타입을 지정하여 사용하고 있다.

jsx 내부에서 자바스크립트 코드를 작성할 때는 {}를 사용해 작성하면 된다.

Babel 변환

위처럼 작성된 코드들은 babel을 통해 변환된다.

변환 전

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

변환 후

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

jsx코드가 createElement()로 바뀌는 것을 볼 수 있다.

React의 상태관리

react의 상태관리에는 redux와 mobx를 많이 사용한다.

리액트 초기에 사용한 flux 아키텍처를 좀 더 정형화하고 심플하게, 사용하기 쉽게 해주는 대안으로 나온 것이 redux여서 지금도 거의 react와 하나의 패키지처럼 사용되고 있다.

mobx는 redux와는 상태를 바라보는 관점 자체가 다른 또다른 상태 관리 라이브러리다. 기능이 많아서 다양한 방법으로 사용할 수 있는데 이런 유연성 때문에 실수할 수 있는 여지 또한 많다.

Happy_Nerd

다음 포스트

우아한 테크러닝 3기 React & TypeScript 1회차