리액트 Deep Dive

리액트를 선호하는 이유

1. 리액트의 상태변화는 '단방향' 그리고 '명시적'으로 이루어진다. 때문에 상태가 변화했다면, 그 상태 변화를 명시적으로 일으키는 함수만 찾으면 된다.

2. JSX : 자바스크립트에 HTML을 살짝 가미한 수준

3. 비교적 낮은 러닝커브 : 1+2 조합으로 처음에 비교적 난이도가 쉽다. 하지만 성능 최적화하는 것부터는 어렵다는 점!

4. 강력한 커뮤니티와 메타의 디팬스(defence) : 자유도가 높은 리액트로 많은 개발자들이 꿈과 희망을 펼치기 시작했고 그로 인해 정보나 이슈해결에 도움이 되는 커뮤니티가 활성화 되었다. 또한 메타(이전의 페이스북)가 적극 지원을 해주면서 꾸준히 성장 할 수 있었다.

React의 등장

페이스북 팀은 더 나은 사용자 경험을 위해 BoltJs라는 새로운 프레임워크를 개발한다.
하지만, 돌연 삭제되고 그 이유는 공개하기에는 부족한 코드라는 판단이 아니였을까 추측된다.
그에 따라 많은 개발자들이 Functional Bolt 즉 Fbolt(함수형 boltJs)를 생각해 내는데 훗날 이것이 React가 됩니다.
모델의 데이터가 변경되면 이전 DOM을 버리고 새롭게 렌더링하자!는 아이디어가 나온 것이다.
🎉 그렇게 React 의 역사가 시작되었다. 🎉

React의 발표

JsConf US 2013 에서 공개했으나 처음에 반응은 그다지 호의적이지 않았다.
"자바스크립트랑 HTML을 섞다니! It's terrible!!!😱"
하지만! 오픈소스 컨트리뷰터에게서 많은 아이디어를 얻기 시작하면서 빛을 보기 시작했다.
메타는 이 기회를 놓치지 않고 리액트 커뮤니티를 형성하는데 노력을 쏟기 시작한다.

자리잡기 시작한 React

점차 추가되는 기능과 복잡해지는 요구사항으로 고민하던 야후!메일을 시작으로 넷플릭스도 긴 최초 상호작용시간, 오래걸리는 사이트 빌드 등의 이유로 어려움을 겪다가 야후!메일의 성공을 보고 react를 적용하기로 한다. 전 세계에서 두번째로 큰 IT 회사인 넷플릭스가 React를 적용하다니!
Bravo!🙌🏻
🎊 React 전성기의 시작이다! 🎊

01. 리액트 개발을 위해 꼭 알아야 하는 자바스크립트 (~53p)

1. Es6에서 새롭게 도입된 비교 문법 Object.js

• Object.js
  • === 처럼 타입이 다르면 false를 반환한다.
  • -0 === +0 => true / Object.is(-0, +0) => false
  
  

2. 부수효과를 최소화하기 위해서 useEffect를 최소한으로 사용하는 것이 좋다. useEffect 사용을 줄임으로써 함수의 역할을 좁히고, 버그를 줄이며, 컴포넌트의 안정성을 높일 수 있다.

02. 리액트 핵심요소 깊게 살펴보기

1. JSX
   리액트에서 JSX를 접하다 보니 리액트의 전유물이라고 착각하기 쉬운데 JSX는 독자적인 문법이라는 사실!
   하지만, 아무런 처리없이 JSX 코드를 실행하면 오류가 발생한다.
   반.드.시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 자바스크립트 코드로 변환된다.
   • JSXElement

     	<div><div />
     	<div/>
     	<></>

   • JSXAttributes
   • JSXChildren
   • JSXStrings

1-1. JSX가 변환되는 특성을 활용

import {createElement, PropsWithChildren} from 'react';
function Text({
   isCheck,
   children,
}: PropsWithChildren<{ isCheck : boolean}>) {
 return isCheck ? (
   <h1 className="text">{children}</h1>
 ) : (
  <span className="text"> className="text">{children}</span>
 )
}
//이런식으로 짠다면 불필요한 코드 중복이 일어나서 비추
//
//
import {createElement, PropsWithChildren} from 'react';
 function Text({
   isCheck,
   children,
}: PropsWithChildren<{ isCheck : boolean}>) {
 return createElement(
	isCheck ? 'h1' : 'span',
	{ className : 'text'},
	children,
 )
}
// JSX 반환값이 결국 React.createElement로 귀결된다는 것을 알면
// 이렇게 리팩토링 삽가능!

2. 가상 DOM
   하나의 페이지에서 모든 작업이 일어나는 싱글 페이지 어플리케이션의 경우 DOM의 부담도 크다.
   때문에 탄생한 것이 가상 DOM이다.
   가상 DOM은 말그대로 실제 브라우저의 DOM이 아닌 react에서 관리하는 가상의 DOM이다.
   가상의 DOM은 실제 브라우저의 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저 DOM에 반영한다.
   이렇게 메모리에서 계산하는 과정을 한번 거치게 된다면, 실제 DOM이 받는 부담을 덜 수 있다.

   2-1 가상 DOM을 위한 아키텍처, 리액트 파이버
   파이버는 가상 DOM과 실제 DOM을 비교해서 변경사항을 수집한다. 후에 파이버 기준으로 렌더링을 요청한다. 이것은 모두 비동기작업으로 이루어진다는 점!
   파이버는 컴포넌트가 최초로 마운트되는 시점에 생성되어 가급적이면 재사용된다.