React&TypeScript(테크러닝) #1

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

let foo =10; //알아서 추론해서 number로 
let foo: number =10; //명시적으로 type 이것이 better
foo = false; //오류 

type Age = number; //내가 원하는 type alias

let age: Age = 10;

type Age = number;

type Foo = {
    age: Age;
    name: string;
   }
   
interface Bar {
    age: Age;
    name: string;
   }
   
const foo: Foo = { //type alias
    age: 10,
    name:'kim'
   }
   
const bar: Bar = { //interface
    age: 10,
    name:'kim'
   }

컴파일 타임까지 작동되는 요소
런타임 까지 작동되는 요소

React

create-react-app: 리액트 프로젝트를 간단하게 구성할 수 있음
yarn create react-app 폴더명 --template typescript

babel: 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

function App() {
  return(
      <h1 id="header">hello tech</h1>
     )
   }
   
              ↓ ↓ ↓ 
              
   
function App() {
  return(
   react.default.creatElement("h1", {
   		id: "header"
            }, "hello tech");
        }
   

   
function App(props) {
	retrun(
    	<h1> { props.title } </h1>
        )
      }
      
ReactDOM.render(
	<React.StrictMode>
    	<App title="Tech Hello?" color="red" />
    </React.StrictMode>,
    document.getElemnetById('root')
    );

TypeScript 사용

interface AppProps {
	title: string;
    color: string;
   }
   
function App(props: AppProps) {
	retrun(
    	<h1> { props.title } </h1>
        )
      }
      
ReactDOM.render(
	<React.StrictMode>
    	<App title="Tech Hello?" color="red" />
    </React.StrictMode>,
    document.getElemnetById('root')
    );

Redux: react의 상태관리 라이브러리이다. 컴포넌트들끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다.
리덕스 란?
cf ) MobX