[클라우딩 어플리케이션 엔지니어링 TIL] 240218 - React 실전 프로젝트 5, 리액트 특강

Intro

---

감정 일기 프로젝트를 마무리하면서 개발할 때 흔히 발생하는 버그에 대해 알려주셔서 도움이 많이 되었다.

전날 일정때문에 못들은 특강도 다시 들으며 복습도 했다.

 

 

 

오늘 학습한 내용

---

흔히 발생하는 버그

• 배열로 전달되는 데이터 리스트에서 겹치는 키가 발생했는지 확인하고 어떻게 구현할 지 고민할 필요가 있다.
• 오타 체크하기!! (오타를 막아주는 타입스크립트 언어를 사용하는 것도 권장)
• 날짜 계산 체크하기: 시간까지 영향을 미치기 때문에 주의가 필요하다.

예시) 원하는 달의 마지막 날을 구할 경우, 23시 59분 59초까지 설정을 해야 데이터를 빠짐없이 가져올 수 있다.

const lastDay = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0, 23, 59, 59).getTime();

 

 

---

 

React에서 이미지 파일 보관 방법

: React 앱에서는 이미지 파일의 위치에 따라 최적화 진행 여부가 결정된다.

이미지는 public 폴더 내 또는 src 내에서 불러올 수 있는데, public보다는 src 폴더 안에 있는 이미지 파일을 import 해 와야 최적화 과정에 포함된다.

import logo from './image/logo.png'

<img src={logo} />

 

• import로 불러와 사용된 이미지는 번들링 시 포함된다.
• 이때 불러온 이미지 파일의 사이즈가 10000Byte이하면 Data URL(이미지 파일을 Base64 방식으로 인코딩해 놓은 것으로 HTML 내부에 캐싱된다.) 이라는 형식으로 변환한다.
• 단, 이미지가 많이 존재하거나 너무 큰 경우엔 경로를 통해 이미지를 불러오는 것이 더 좋은 선택이 될 수 있다.

 

 

State를 직접 변경하지 않는 이유

자바스크립트의 핵심 개념 중 하나인 변수의 불변성을 지켜야 하기 때문이다.

불변성이란 변수가 생성된 이후에 원본 데이터가 수정되지 않아야 하는 원칙이다.

또한, 리액트에선 ===로 State 변경을 확인하는데 객체 State의 주소값이 바뀌지 않으면 변화를 감지하지 못한다.

 

 

리액트의 렌더링 프로세스

Render Phase ➡️ Commit Phase

• Render Phase
  • React 컴포넌트가 렌더링해야 하는 UI를 Virtual DOM이라는 객체 값으로 변환하는 과정
  • 컴포넌트를 호출해 결과 값을 계산한 후 ➡️ React Element들을 모아 Virtual DOM을 생성
• Commit Phase
  • Virtual DOM을 실제 DOM에 반영해 브라우저가 화면을 새로 그리는 과정

리액트는 DOM의 수정을 최소화하기 위해 이러한 과정을 거친다.

동시에 발생한 업데이트를 모아 한 번만 DOM을 수정하게 된다. (Reconciliation: 재조정)

⚠️ 리액트의 이러한 렌더링 과정이 항상 최고의 속도를 보장하는 것은 아니다.
Virtual DOM을 생성하고 비교하는 데에도 연산이 소요되기 때문에..!! 

 

 

 

 

 

마무리

---

토요일에 진행됐던 리액트 특강에서 유익한 내용들이 많아서 좋았다.

리액트 관련 내용뿐만 아니라 공부하는 방법 등 개발 공부의 방향성을 잡아주려 하셔서 더 좋았다.