46 :: CRA, React 개발 순서, 왜 리액트 사용하나? 왜 함수형 사용하나?

엘리스 SW 엔지니어 트랙 46일차

egoing님 리턴! 실시간 강의날

 

 

프로젝트에 관한 이야기

생활속 반복되는 일 중

Automation이 가능한 일을 만들면

그게 작더라도 프로젝트다

 

 

Create React APP

리액트 개발환경 만들기 엄청 어려운데

create-react-app 한 줄로 만들어지는 혁신이라고 하신다

npm install --global create-react-app
npx create-react-app react-app(프로젝트이름)

링크 => https://create-react-app.dev/

 

 

React 개발 순서

1. npm run start 개발 장소
2. src/index.js 엔트리 파일
3. public/index.html html 템플릿 파일
4. import 'filename.css'를 이용해서 css를 사용할 수 있다
5. npm run build 배포 버전 생성
6. build 배포 버전의 내용이 담긴다

 

 

대문자로 시작하면 리액트에서 만든 사용자 정의 태그 => Component(컴포넌트)

소문자로 시작하면 html 태그

 

 

 

img 태그를 보면 속성(입력값)에 따라 다르게 동작한다

우리의 태그도 속성(파라미터)에 따라 다르게 동작하도록 할 수 있다

<Article title="React" body="Hello, WEB!" />

 

 

key

각각의 원소는 key 값을 가져야된다

 

 

SPA

SPA는 링크로 이동되면 안된다

preventDefault()를 사용한다

 

 

 

병철님도 리턴! 실시간 강의날

 

왜 리액트를 사용하나?

=> Virtual Dom의 유무, 이 말은 렌더링 횟수의 차이

 

인기 많았던 jQuery의 문제

Dom를 직접 뜯어 고치고, Dom이 변경될 때마다 계속 렌더링한다

 

React는

Virtual Dom(Shadow Dom)이 Dom 구성요소(?)를 가지고 있다가 한번에 렌더링 시킨다

렌더링 횟수 차이가 중요해 보인다

Vue, React, Angular 모두 Virtual Dom를 사용한다

 

참고로 Github은 Virtual Dom을 바닐라 자바스크립트로 구현해놨다

 

 

프론트엔드 기술의 발전이 빠르다

지금 쓰는 프레임워크는 계속 바뀐다

하지만 모두 JavaScript, 그래서 바닐라가 중요한거다

프론트엔드 프레임워크 링크 => https://2020.stateofjs.com/ko-KR/technologies/front-end-frameworks/

 

 

왜 지금은 Class가 아니라 함수형을 쓰는가?

링크 => https://ko.reactjs.org/docs/hooks-intro.html

 

 

참고 링크

네이버 D2 => https://d2.naver.com/helloworld/7226235

How Browser Work => https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

js관련 통계 => https://2020.stateofjs.com/ko-KR/

React Developer Tools => https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en