[우아한테크러닝 3기] React&TypeScript #3일차

sk97kang·2020년 9월 8일
0

3일차

📅 2020-09-08 19:00 ~ 22:00

강의

React

React는 DOM을 조작하기 쉬운 Object로 변환해주는 것

React로 간단한 웹 앱 만들기

  1. 간단하게 만든다.
  2. pure function으로 만든다.
  • pure function : 입력이 같으면 항상 출력이 같은 함수

Compile Time , Run Time

JS는 스크립트 언어이기때문에 Compile Time이 없었지만,
기술이 발달하면서 브라우저가 이해할 수 없는 문법들을 많이 사용하면서 Compile Time이 생겼다.

DOM과 Virtual DOM

HTML Tag를 JS로 쉽게 다루기 위해 DOM 이 나왔고,
DOM을 JS로 쉽게 다루기 위해 Virtual DOM이 나왔다.

DOM : HTML Tag <=> DOM <=> JS
Virtual DOM : DOM <=> Virtual DOM <=> JS

React는 단 1개의 Virtual DOM을 가지고 있다.

React.createElement() : Virtual DOM을 만든다.
ReactDOM.render() : Virtual DOM으로 Real DOM을 만든다.

JSX

JSX문법을 Babel이 JS Code로 변환해준다.

User Component와 BuiltIn Component

대소문자로 구분

대문자 : User Component
소문자 : BuiltIn Component

Class Component와 Functional Component

Class Component

  • React과 render()를 호출하면서 render 한다.
  • state 변경 시 setState()를 이용하여 변경하여야 React과 render()를 호추하면서 화면이 변경된다.
FUnctional Component
  • 함수를 생성하면서 render 한다.

State

Class Component는 객체이기때문에 State를 가질 수 있다.
Functional Component는 state를 가질 수 없다.
Hook을 통해 state를 가질 수 있다.

Hook

  • useState
    1. 어떻게 다시 render 되는가?
    2. 어떻게 state를 가지고 있는가?

전역으로 배열을 두고 컴포넌트를 키로 값을 넣어서 이후에 호출할 때 그 값을 리턴한다.

프로그래밍

좋은 Architecture?

같은 것들은 묶고, 다른 것들은 분리하자.
그러면 어떤게 같은 것이고, 어떤게 다른 것인가?
=> 지식수준에 따라 달라보인다.

Naming만 잘해도 70%는 먹고들어간다.

보충자료

CDN 이란?

React 만들기

profile
주니어 개발자 Kan

0개의 댓글