day02

유요한·2022년 11월 23일

React

프론트(HTML & CSS & JS & React)

목록 보기

42/46

React 핵심 컨셉

1. 리엑트는 Component들이다.

리엑트는 웹 UI를 만드는 라이브러리이다. 즉, 리엑트는 component들로 이루어진 UI 라이브러리이다. 리엑트의 component들도 dom tree처럼 트리형식으로 이루어져 있다.

component

서로 독립적(independent)

잘 고립되어져 있다.(isolated)

재사용이 가능해야 한다.(reusable)

2. state와 render

리엑트는 상태가 변경이 될 때마다 어플리케이션 전체를 다시 렌더링한다. state에 맞게 render함수에서 어떻게 렌더링할 건지 한번만 정리해 놓으면 리엑트가 알아서 상태가 변경되고 render함수를 호출해준다.

state : 컴포넌트에 들어있는 데이터를 나타내는 객체, 데이터의 저장공간
render : JSX로 작성되었으며 state에 변경된 사항이 있으면 render함수가 실행된다.

React는 변화가 필요한 요소만 업데이트해서 랜더링해주는 것이다.

3. JSX : 컴포넌트 작성은 심플하게

가상 돔트리(Virtual DOM Tree)

DOM은 HTML, XML 문서의 프로그래밍 interface이다. 즉 DOM을 활용해서 그저 텍스트 파일이기만 했던 HTML이나 XML 문서(document)에 프로그래밍 언어가 접근할 수 있도록 한다. DOM은 이름 그대로 문서 구조를 트리 형태의 객체(Object)로 표현한다. 특히 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용하게 된다. 컴포넌트의 상태가 변경되면 view를 새로 그리게 되는 방식으로 동작한다. root컴포넌트에서 상태가 변경되면 모든 컴포넌트들을 새로 렌더링하게 된다. 이렇게 상태가 변경될 때마다 모든 render함수가 호출되면 안좋아질 수 있다고 생각할 수 있지만 리엑트에서는 컴포넌트들이 가상의 DOM Tree형태로 메모리상에 존재한다. DOM Tree에 직접 업데이트 되는 것이 아니라 먼저 가상의 DOM Tree에 업데이트하는 것이다.

CRA(create-react-app)

리액트에서 공식 발표한 리액트 프로젝트를 최신화 로드할 수 있다.

babel, webpack, lint, dotenv => 리엑트에 있어서 필요한 라이브러리 혹은 설정들을 이미 셋팅한 상태에서 바로 프로젝트를 만들 수 있도록 제공하는 명령어

npx create-react-app 프로젝트명

p.s) test code 작성을 위한 라이브러리들도 설치

+) vite

webpack

모듈 번들러
모듈 → 한가지의 이상 기능을 하는 분리된 코드의 집합, 덩어리
번들러 → 묶어주는 것

너저분하게 분리되어 있는 모듈들을 포함한 페이지의 리소스(html, css, js, img, ...) 확장자명 혹은 특정 기준의 분류로 묶습니다.

예시)
외출을 할때 바닥에 흩어져 있는 옷들을 찾아서 입는것이 빠른지 아니면 서랍장에 잘 모아놓은 옷을 골라서 입는 것이 빠른지

당연히 후자가 빠르기 때문에 모듈 번들러인 웹팩을 사용하면, 네트워크 연산 비용이 획기적으로 줄어들게 된다.

모듈 단위의 개발이 가능
네트워크 연산 비용 줄어듬
loader라는 기능을 통해 js가 로드할 수 있는 상태로 컴파일(변환)

대표적인 css-loader를 통해 js에 css파일을 참조하여 사용가능

babel

트랜스파일러(번역기)
ES6 - 모던 자바스크립트
es-next
es-2020
es-2022

이러한 최신 문법을 브라우저 로더가 이해를 할 수 없는 경우가 있음
이러한 것들을 ES5 이하의 문법으로 트랜스파일하여 이해할 수 있도록 변환

특히 JSX 문법을 사용하는 react의 경우는 바벨이 필수적으로 사용된다.

react에서는 babel 중 4가지의 모듈을 사용

@babel/core: 핵심 요소들이 들어가 있는 모듈
@babel/cli: 명령어를 통해 cmd창에서 바벨을 컨트롤
@babel/preset-env: 가장 일반적인 설정을 모은 것
@babel/preset-react: 바벨을 JSX 문법도 사용할 수 있도록 해주는 모듈

파일 구성

0. .git
git init
1. node_modules
앞으로 설치할 라이브러리들이 담길 파일
2. public
index.html, facvicon, manifest(웹에 대한 설명), robots.txt(검색엔진)
3. src
개발을 진행하는 곳
4. .gitignore
5. package-lock.json
라이브러리 설치 시, 라이브러리들의 정확한 정보
6. package.json
설치된 라이브러리들을 관리, 실행 명령어, 확장프로그램

npm i → package.json 의존성이 부여된(설치된) 라이브러리 설치(node_modules 설치)

npm i와 npx create-react-app 차이

npm i는 git이나 다른 프로젝트를 가져왔을 때 node_modules이라든지 커서 안보냈을것이다. 그렇기 때문에 가져와서 사용할때는 npm i로 해줘야 한다. npx create-react-app은 내가 새로운 프로젝트를 만들때 사용한다.

src

App.css
→ App.js 참조 되어 있는 css 파일
App.js, index.js와 더불어 최상위 컴포넌트
따라서 App.js에 참조된 css 파일을 모든 컴포넌트에 적용
그러나 react에 접어들면서 CSS-in-js를 작성
scss 혹은 css를 사용하는게 아니라면 필요없다.
전역 스타일링, css-in-js에서는 따로 기능 존재, 필요없다.

index.css
→ 위와 마찬가지

index.js, app.js

최상위 컴포넌트, index.html의 Id root div에 렌더링
해당 컴포넌트 설정된 것들 모든 컴포넌트에 적용

reportWebVitals.js
프론트엔트 성능(퍼포먼스) 체크

App.test.js, setupTests.js
테스트 코드 작성에 필요한 것
setupTests.js는 테스트 코드 라이브러리 참조를 전역

npm run test라는 명령어를 사용시 *(모든것).test.확장자명 ← 실행

p.s) 명령어 중 run과 start는 동일 의미 따라서 start만이 npm start로 실행, 그 외는 앞에 run을 붙여주어야 한다.

폴더 정리

logo, index.css, app.css, reportWebVitals.js 삭제

컴포넌트 구조(프론트엔드의 설계)

좋은 컴포넌트 구조(프론트엔드의 설계)?
유지보수, 가독성, 재사용
컴포넌트 구조 정답은 있는 것인가?

정답은 없다.
회사마다, 프로젝트 규모마다, 프로젝트의 목적마다 컨벤션이 다름
보편적인 프론트엔드 구조와 설계는 존재

구조

assets

자산을 의미한다.
프로젝트에서 사용할 이미지, 비디오, json파일 등 미디어 파일들을 모아두어 저장하는 곳

components

공용으로 재사용되는 컴포넌트들이 들어갈 폴더
ex) 버튼, alert() 등 ← 모든 페이지에 사용할 것

pages

컴포넌트가 조립되는 공간, 도메인(url) 별 분리

page에서도 components를 만들어서 관리하는데 page에서 만드는 components는 거기에만 해당되는 것이다. 예를들어 page에서 Home폴더를 만들어서 routes폴더에 보내줘서 페이지를 구현하려고 할 때 그곳에만 있는 components라면 Home안에 폴더를 만들어서 만들어주고 내가 구성하려고 하는 홈페이지에 재사용하거나 공통적인 것은 components폴더에 만들어서 사용한다. 하지만 이것은 필수는 아니다. 회사마다 다름!

routes

url 설정 그 url에 따라 어떤 컴포넌트가 보여질지 정하는 폴더

style

공용 혹은 재사용 및 전역으로 사용되는 css를 관리하는 폴더

services

자바스크립트 모듈을 담는 폴더

utils

재사용 가능성이 있는 함수를 관리하는 폴더

라이브러리

react-router-dom

router → 네트워크 데이터 전송 = 소포
react에서 dom을 전달하기 위해 사용하는 소포

=> 특정 url에 맞춰서 dom(Component)을 전달
=> url이 변함에 따라 다른 Component를 보여주는 역할

설치
npm i react-router-dom
styled-components / emotion