React 기초 세션 특강을 듣고...

이정환 강사님 React 기초 세션 특강
주제 : React 기초
일시 : 4월 8일(월) 오후 7시 ~ 8시30분(1.5h)

리액트는 왜 만들어지게 되었을까?
리액트의 설계 의도는 무엇일까?

web의 눈부신 발전과 리액트의 탄생

기술이 어떤 시대적인 배경에서 어떤 문제를 해결하기 위해 탄생했는지 알아야 한다.

90_00: 읽기 전용 기반의 웹 서비스가 대부분
오늘날: 사용자와 실시간으로 상호작용하는 서비스들이 대세, read-write 기반의 웹 서비스
-> 현대 웹서비스 개발에서 화면 업데이트(인터렉션) 구현의 중요성이 매우 높아짐

JQuery

• 바닐라 js 기반으로 DOM을 직접 수정하는 방식으로 동작함.
• 크로스 브라우징 이슈를 해결하고자 만들어짐.
• 쉽고 빠르게 다양한 업데이트를 구현하기에는 무리가 있었음.

리액트

• 화면 업데이트를 더 쉽게 구현할 수 있음.
• 화면 업데이트가 빠름, 최적화가 거의 자동으로 이루어짐

✨리액트3가지 핵심 특징

1. 컴포넌트 기반의 UI 표현

컴포넌트: 구성요소 -> 화면을 구성(UI를 구성)하는 요소
UI 모듈화 가능 -> 중복 코드 최소화

2. 선언형 프로그래밍을 통한 쉬운 업데이트

선언형 프로그래밍: 과정은 생략하고 목적만 간결히 명시하는 방법
명령형 프로그래밍: 목적을 이루기 위한 모든 일련의 과정을 설명하는 방식

리액트에서는 선언형으로 업데이트를 구현할 수 있다. -> 업데이트를 위한 모든 로직을 일일이 작성하지 않아도 됨.

State 상태

• 컴포넌트 내부에 선언할 수 있는 특별한 변수
• 컴포넌트가 현재 어떤 상태인지 저장하는 역할
• 상태 값에 따라 컴포넌트가 렌더링 하는 UI를 바꿀 수 있음

✔️리엑트에서는 업데이트를 구현할 때 state만 바꾸면 된다.

3. 자체 렌더링 프로세스를 통한 빠른 업데이트

리액트는 화면 업데이트를 쉽게 구현할 수 있으면서 동시에 빠르게 처리한다.
❓어떻게 이럴 수 있을까?

브라우저는 어떻게 동작하는가?

1. HTML 파싱:
HTML 문서를 파싱하여 DOM 트리를 생성

2. CSS 파싱:
CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성

3. 렌더 트리 구성:
DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성

4. 레이아웃: (reflow)
렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하여 레이아웃을 수행

5. 페인팅: (repainting)
레이아웃이 완료되면 화면에 픽셀을 그리는 과정인 페인팅이 수행

-> 업데이트할 때마다 DOM 전체가 업데이트 된다.
-> 리액트는 동시에 발생한 업데이트를 모아서 한번에 수정한다.(자동으로 해줌)

 

✨Virtual DOM

• DOM을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판임
• 리액트는 가상 DOM을 사용한다.
• 엘리먼트를 새로 렌더링할 때 리액트는 그 모습을 실제 DOM트리에 바로 반영하는 것이 아니라 가상 DOM에 적용한다.
• 리액트는 state 변경 전의 가상 DOM과 변경 후의 가상 DOM을 비교한다. 그래서 바뀐 부분만 찾아내고 각각에 해당하는 실제 DOM 노드를 변경한다.

뷰도 배워야 하나?
배우면 좋겠지만 비추.
뷰가 할 수 있는 건 리액트도 다 할 수 있음

리덕스: 리덕스 툴킷 많이 씀. 경량화된 라이브러리
주스탕: 리덕스에서 더 경량화 된 라이브러리 (추천 + 리덕스도 함께 하는 것도 추천)

면접에서) 프로젝트에서 리덕스를 썼다고 가정했다면, 주스탕과 리덕스의 차이점에 대해 설명하면서 왜 더 좋았는지 이걸 써는지 어필..

토이프로젝트를 대하는 방식에 대해 생각해보자
https://velog.io/@dus532/series/%EC%86%8C%ED%94%84%ED%8A%B8%EC%BD%98-%EB%B7%B0%EC%96%B4%EC%89%BD-%EC%A0%9C%EC%9E%91%EA%B8%B0

챗지피티를 활용해서 10년된 개발자가 짠 코드 알려줘해서 -> 코드 비교해보기

리액트 설계원리에 맞춰서 코딩해라
https://react.dev/learn/thinking-in-react

리액트는 Flux패턴