about React
프로젝트 구조
package.json
npm 버전관리에 대한 정보 (라이브러리포함)
postcss 같은 유용한 패키지들이 자동으로 생성되어 있어 바로 사용가능.
**readme에 프로젝트에 대한 설명을 적기를 권장
node_modules
외부라이브러리 추가했을떄 폴더나 파일들이 구조로 생성및 관리되있음
(라이브러리의 이상함을 감지해 내부 구조를 확인할 수 있음)
manifest.json
pwa 사용과 관련된 파일
**프로젝트 생성시 깃이 자동으로 생성되게 되있음 (.git)
BAbel이란?
Js,TS ->old JS ver (compiling)
Webpack이란?
bundling
Eslint
Check code
Jest
unittesting framework
postCss
expandable libraries
그외 크롬 툴
react developer tool
리액트로 만든 품목들의 콤퍼넌트를 확인할 수 있다.
그외 vs코드 툴
reactjs code snippets
rcc ris 같은 단축키만으로, 간단한 스켈레톤 프레임을 생성하는 툴
auto import
모듈경로 자동 완성기능
리액트의 virtual dom tree 와 dom tree의 차이
리엑트의 경우 데이터 일부가 변경된 경우 이전 데이터와 비교하여 수정된 내용만 업데이트 한다.
컴퍼넌트
class형 라이프사이클 메써드(state)
함수형(React Hook)
class 형 컴퍼넌트를 기피할때의 이유
binding issue
디자이너들이 보기 어려운 구조
but
binding의 경우 여러가지 기능을 넣었을떄 복잡하게 되지만
api같은 하나의 기능으로서 일부부분을 제한적으로 분산시켜
binding하는 경우 가독성도 좋은 점이 있어 class형과 함수형을 적재적소에 사용하는 것이 제일 이상적이다.
app.jsx, app.js 로 구분해서 사용하는 이유는 리액트 문법으로 사용되는 것인지 자바스크립트로 작성된 것인지 확인하기 위함
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import '@fortawesome/fontawesome-free/js/all.js';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reactDom을 호출하고 index.html에 있는 root에 연결되면서 App컴퍼넌트를 그려줌
Author And Source
이 문제에 관하여(about React), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@deathsizes_86/about-React저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)