React

27.11.2023 — REACT, 2023 — 20 min read

웹 역사

넷스케이프 회사 웹 브라우저를 개발한 회사 자바스크립트 언어 개발 => 웹 브라우저를 동적으로 만듬

웹 1.0 - 웹 페이지의 시대

팀버너스리 -> html 개발 -> 누구나 사용할 수 있도록 http 개발 -> 누구나 쉽게 벌 수 있도록 월드와이드웹 브라우저

모자이크 브라우저 개발 => 모질라 등 브라우저 출시

자바스크리트 탄생

자바스크립트를 사용한 브라우저 돔 조작은 너무나 복잡하고 불편

jquery .. bootstrap .. 등 인기

웹 2.0 -웹 애플리케이션 시대
1. xmlhttprequest api 등장 -> 새로운 정보를 표시하기 위해 서버에 웹 페이지를 매번 요청하던 방식에 큰 변화를 가져온다
2. json 데이터 포멧 등장 널리 사용
3. 2004 구글이 ajax 사용
4. 2007,2008 아이폰,안드로이드 등장 -> 애플리케이션 시대
  
  싱글 페이지 어플리케이션 (spa) 시대 등장
5. 2010 angularjs 웹 애플리케이션 프래임워크
6. 2013 react (ui 에 집중한 라이브러리) jsx: javascript xml 라는 자바스크립트에 html 을 포함하는 간단한 문법 ,단방향 데이터 바인딩 채택

리액트는 페이지 전환에 관한 기능이 존재하지 않아 react-router 등 과 같은 다른 라이브러리를 사용해야 한다 이러한 문제를 해결하기 위해 nextjs 와 같은 프레임 워크가 등장한다

리액트 특징

jsx 자바스크립트아 html 동시 사용하며,템플릿 언어
단반향 데이터 바인딩
- 단 하나의 왓처가 자바스크립트의 데이터 갱신을 감지하여 사용자 ui를 갱신
- 하나의 왓처로 이벤트를 통해 명시적으로 데이터 갱신
- 명확하게 데이터 추적을 할 수 있다.
- 양방향 데이터 바인딩
  - 싱글 페이지 어플리케이션의 대표적인 프레임워크 앵귤러,뷰는 양방향 데이터 바인딩
  - 사용자 ui의 데이터 변경을 감시하는 왓처와 자바스크립트 안에서 데이터 변경을 감시하는 왓처를 통해 ui 와 프로그램 안에 데이터를 자동으로 동기화해 주는 기능
  - 데이터를 동기화 해주는 장점도 있지만 데이터 하나에 동기화를 위한 왓처가 두 개 사용되기 때문에 간단한 기능임에도 불구하고 오버 스펙인 경우가 발생
  - 오버 스펙과 수많은 와처에 의한 성능 저하를 발생시킴,이를 방지하기 위해 단방향 데이터 바인딩도 지원한다
flux 라는 개념을 도입: 데이터의 흐름이 한쪽 방향으로만 진행되는 것을 권장 https://medium.com/hcleedev/web-react-flux-%ED%8C%A8%ED%84%B4-88d6caa13b5b

action-> dispatcher -> store-> view

가상 돔
- 브라우저에서 html,css 렌더링
  - 사용자가 브라우저를 통해 웹 페이지 요청-> 페이지 html 전달 받음
  - 브라우저는 렌더 엔진을 통해 html 파싱하여 돔 노드로 이루어진 트리를 만든다.
  - css 파일과 각 엘리먼트의 인라인 스타일을 파싱하여 스타일 정보를 가진 스타일 렌더 트리를 만든다.
  - 브라우저는 각 노드들에 paint 메소드를 호출하여 색상을 입히는 페인팅 과정 거쳐 최종적 화면에 표시
- 이렇게 표시된 돔 트리를 => 자바스크립트로 조작 => 리플로,리페인트 (레이아웃 다시 수행,페인팅 과정 다시 수행 )으로 성능 떨굼
정적인 웹 사이트나 자바스크립트를 사용하여 돔을 변경하는 동작이 적은 웹 페이지인 경우 크게 문제가 되지는 않지만,싱글 페이지 애플리케이션처럼 사용자와의 상호작용이 많고 돔 변경이 동시 다발적으로 빈번히 발생하는 사이트인 경우에는 리플로와 리페인트가 많이 발생하면 애플리케이션의 성능 문제가 발생

리액트에서 가상 돔을 도입해 리플로와 리페인트 연산을 최소화함
- 가상돔 : 화면에 표시되는 돔 트리와 동일한 돔 트리에서 모든 연산을 한 후 실제 돔 트리를 갱신하는 방식으로 리플로와 리페인트 연산을 최소화함
선언형 프로그래밍
- 명령형 프로그래밍은 그 값을 얻기 위해 어떻게 하는지 집중
- 선언형 프로그래밍은 결과값이 무엇인지에 집중
컴포넌트 기반 레고처럼 조합하여 페이지를 제작하는 컴포넌트 기반 프로그래밍 컴포넌트 주도 개발 방법(CDD)

SPA

각 페이지별로 html 파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 html 파일을 받아와서 화면에 표시

html 파일이 수백 개 된다면..

하나의 페이지만 존재하는 웹사이트

리엑트?

웹과 네이티브 사용자 인터페이스(user Interface)를 위한 라이브러리

라이브러리:자주 사용되는 기능을 정리해서 모아 놓은 것

사용자 인터페이스를 만들기 위한 기능 모음집을 ui 라이브러리 리액트는 대표적인 자바스크립트 ui 라이브러리

프레임워크 vs 라이브러리

프로그램의 흐름에 대한 제어 권한 프레임워크는 흐름에 제어 권한을 개발자가 아닌 프레임워크가 갖고 있는 반면에, 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분민 필요할 때 가져다 사용하는 형태 라이브러리는 제어 권한이 : 개발자 프레임워크 제어 권한 : 프레임워크

리엑트 장점

빠른 업데이트와 렌더링 속도

가상의 DOM : virtual dom
dom : document object model 의 약자로 웹 페이지를 정의하는 하나의 객체 리엑트는 dom 을 직접 수정하지 않고 업데이트해야 할 부분만 찾아서 업데이트 어떤 상태 변경이 일어나면 가상의 돔에서는 업데이트해야 될 최소한의 부분을 검색 검색된 부분만을 업데이트하고 다시 렌더링하면서 변경된 내용을 빠르게 사용자에게 보여줄 수 있는 것

컴포넌트 기반
재사용성 다시 사용이 가능한 성질

단점 높은 상태 관리ㅣ 복잡도 state 는 리액트 컴포넌트의 상태 state 가 바뀐 컴포넌트 = 매번 바뀐 부분 업데이트

웹사이트의 규모가 커져 컴포넌트의 개수가 많아지면 상태 관리의 복잡도도 증가

redux mobx recoil 등의 외부 상태 관리 라이브러리를 사용

JSX

자바스크립트 확장 문법 javascript xml/html

리액트는 jsx 코드를 모두 createElement 함수를 사용하는 코드로 변환 jsx 를 사용하는 것은 필수는 아니다. createElement 를 사용해 개발가능 하기때문 jsx 를 사용했을 때 코드가 더욱 간결 생산성과 가독성 올라감 또한 injection Attack (문자,숫자 가아닌 코드 입력해 실행되도록 하는 기법)이라고 불리는 해킹 방법을 방어함으로 보안성이 올라갑니다. -> xss 방어함

jsx 에서 중괄호 사용하면 javascript 코드 들어감

엘리먼트(어떤 물체를 구성하는 성분)

리액트 앱을 구성하는 요소 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록

엘리먼트는 원래 웹사이트에 대한 모든 정보를 담고 있는 객체 DOM 에서 사용하는 용어 엘리먼트는 dom 엘리먼트로 html 요소 화면을 나타내는 내용을 기술한 자바스크립트 객체

실제 브라우저의 dom 에 존재하는 엘리먼트는 dom 엘리먼트 리엑트 virtual dom 에 존재하는 엘리먼트가 바로 리엑트 엘리먼트

리엑트 엘리먼트는 dom 엘리먼트의 가상 표현

dom 엘리먼트

{
    type:'button' // html 태그 이름,
    props: {
        children :""
    }
}

리엑트 엘리먼트

{
    type:'Button' // 컴포넌트 이름,
    props: {
        children :""
    }
}

컴포넌트 렌터링을 위해서 모든 컴포넌트가 createElement 함수 통해 엘리먼트로 변환
리엑트 엘리먼트 -> 불변성 한번 생성 후에는 children 이나 속성을 바꿀 수 없다
컴포넌트 = 붕어빵 틀 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 하는 것 virtual dom 이 변경된 부분을 계산하고 해당 부분만 다시 렌더링

props 는 같은 리액트 컴포넌트에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트 속 재료 props 는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

pure 하다 입력값을 변경하지 않으며,같은 입력값에 대해서는 항상 같은 출력값을 낸다

inpure 하다 입력값을 변경

모든 리액트 컴포넌트는 props 를 직접 바꿀 수 없고,props 에 대해서는 항상 같은 결과를 보여줄 것

클래스 컴포넌트 = es6 클레스 사용 컴포넌트

소문자 => dom 이 태그로 인식 컴포넌트의 이름은 항상 대문자로 시작

컴포넌트는 기능 단위로 구분하는 것이 좋고 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋다

state = 리엑트 컴포넌트의 상태

리액트 컴포넌트의 변경 가능한 데이터 렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함 state 가 변경될 경우 컴포넌트가 재랜더링되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 컴포넌트가 다시 렌더링되어 성능을 저하 시킬 수 있다 state 는 직접 변경이 불가능 하며 setState()함수를 통해 수정

분리하기

컴포넌트와 분자, 유기체라는 용어는 프로그래밍에서 특별한 의미를 가지지 않는 일반적인 용어입니다. 하지만 이러한 용어는 소프트웨어 아키텍처나 설계 패턴에 대한 비유적인 용어로 사용될 수 있습니다.

"atoms", "molecules", "organisms" 등의 용어는 주로 Brad Frost의 Atomic Design이라는 디자인 시스템 개념에서 나왔습니다. 이 개념에서 "atoms"는 작은 구성 요소, "molecules"는 이러한 구성 요소들이 결합된 것, "organisms"는 더 큰 컴포넌트 또는 모듈을 나타냅니다.

따라서 여러 개의 "atoms"가 결합되어 "molecules"를 형성하고, 그 "molecules"가 더 큰 단위인 "organisms"를 형성하는 식입니다.

여기서 "디바운스 기능을 감싸서 새로운 컴포넌트를 만들었다"는 말은 분자(molecule)를 만들었다고 볼 수 있습니다. 왜냐하면 디바운스 기능이라는 작은 구성 요소(atom)를 사용하여 이를 결합하여 더 큰 기능을 하는 컴포넌트(molecule)를 만들었기 때문입니다.

그러나 정확한 용어나 비유는 프로젝트나 팀의 특정한 문맥이나 규칙에 따라 다를 수 있습니다. 예를 들어, 어떤 팀에서는 "atoms"가 더 작은 단위를 나타내지만 다른 팀에서는 더 큰 단위를 나타내는 경우도 있을 수 있습니다. 따라서 이러한 용어를 사용하는 팀 내에서의 정의나 관행을 확인하는 것이 중요합니다.

react18

1.자동 배칭 리액트 컴포넌트는 state 가 업데이트될 때마다 재랜더링 된다. state 와 set 함수를 동시에 호출하면 호출된 횟수만큼 재랜더링 발생

state 의 업데이트가 동시에 발생할때 여러 작업을 묶어서 한 번에 처리 이 작업이 배칭

배칭은 컴퓨터 공학에서 여러 작업을 한번에 처리한다는 의미 여러 state의 업데이트 작업을 한 번에 묶어서 처리하는 것

기존 리액트에서는 이벤트 핸들어 내에서만 배칭이 이뤄짐??

자동 배칭이 추가되면서 state 의 업데이트 작업을 묶어서 한 번에 처리 추가로 해야하는 작업 없이 기존과 똑같이 setData,setCount 를 같이 호출해도 자동으로 묶어서 한번에 처리하여 재랜더링 1번만 발생

트랜지션 긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 처리하기 위해 등장한 개념

긴급한 업데이트와 긴급하지 않은 업데이트 구분? 긴급: 사용자와 직접적인 인터렉션 (입력,클릭) 긴급 x :서버에서 결과를 받아와 보여줌

더 나은 사용자 경험을 제공하기 위해

입력 간에 키보드로 글자를 넣을 때 몇초가 지나고 나서야 입력된다.. 이처럼 사용자와 즉각 인터랙션이 발생하는 기능은 빠르게 처리해야 함으로 긴급한 업데이트로 지정

긴급것은 기존과 동일하게 업데이트 (setValue) 긴급하지 않은 것은 startTransition 함수 사용

? 더 긴급한 업데이트 발생시 startTransition 중단도리 수 있음??

서스펜스

컴포넌트 코드를 여러 조각으로 분리하는 코드 = 스프리팅 분리된 코드 조각에서 지연 로딩 또는 동작 로딩 기법을 적용해 반응 속도를 높일 수 있다.

suspensed = 유예하다,중단하다 뜻 16 릴리즈때 등장...

역할? 하위 컴포넌트 children 준비되기 전까지 렌더링을 중단한다. 그리고 하위 컴포넌트가 준비된 이후에 렌더링을 진행함으로써 사용자 경험을 향상 시킨다.

기존에는 서스펜스가 코드 스플링과 함께 제한적으로 사용되었지만 리랙트 18 부터 헨더링과 데이터 페칭(제한적으로) 사용할 수 있게 되었다

클라이언트와 서버 렌더링 API 업데이트 (1) 리액트 DOM 클라이언트 클라이언트 렌더링 방식은 ReactDOM.render 함수를 기존에 렌더링 방식 18부터 reat-dom/client 추가되면서 createRoot 함수 사용 렌더링 방식 도입

새로운 API 를 사용하지 않으면 리액트 18에서 제공하는 기능을 사용할 수 없기때문에 createRoot 사용해야함 (2) 리액트 DOM 서버

서버 사이드 렌더링(SSR) 사용을 위해 renderToString() 사용햇었는데... react-dom/server 의 두 가지 함수 사용해 서스펜스와 함께 사용할 수 있도록 업데이트

renderToPipealeSteam 노드 환경에서 스티리밍 위한 함수 renderToReadableStream 엣지 런타임 환경

새로운 Strict 모드 작동 방식 Strict 모드는 개발 모드에서 잠재적인 버그를 찾을 수 있게 해주는 모드 Strict 모드의 동작이 변경되었는데, 개발 모드에서 Strict 모드를 사용하게 되면 컴포넌트 언마운트한 후에 다시 한번 마운트 하게 된다.
새로 추가된 훅