Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

걸음마부터 달리기

[24/10/10] 리액트 본문

카테고리 없음

[24/10/10] 리액트

성추 2024. 10. 10. 14:30
  • 브라우저 렌더링과 Virtual DOM

https://jeong-pro.tistory.com/210

 

Virtual DOM 동작 원리와 이해 (with 브라우저의 렌더링 과정)

Virtual DOM? 1. Virtual DOM이란? → "DOM을 추상화한 가상의 객체" DOM을 추상화한 가상의 객체라고 표현해봤습니다. (개인이 내린 정의) 그러면 우선 저 문장을 이해하기 위해서 DOM이란 뭔지 알아야합니

jeong-pro.tistory.com

 

https://velog.io/@bebrain/%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9-%EA%B3%BC%EC%A0%95

 

웹페이지 로딩 과정

Chrome, Safari, Firefox, Internet Explorer 등 World Wide Web을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램.HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온

velog.io

https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

 

React에서의 가상돔 개념

🙄 리액트로 프로젝트를 만들고 있지만 아직까지도 모호한 개념들이 많아 짬이 나는 시간에 한 번 더 정리해 보기로 합니다.가상돔을 알기 위해 우선 돔의 개념부터 정리해 보자.DOM(Document Object

velog.io

 

 

브라우저는 서버의 요청이 오면 HTML을 응답함과 동시에 클라이언트 브라우저의 일이 시작된다.

받은 HTML은 브라우저에서 DOM 구조로 만들기 전에는 단순 텍스트 형식에 그친다.

파싱을 통해 DOM 트리 형태로 만들어야 비로소 브라우저가 이해할 수 있는 구문이 되고, CSS도 마찬가지로 파싱과정을 거쳐 CSSOM이라는 DOM과 비슷한 CSS Object (Tree) Model을 만든다.

 

이제 이 둘을 합쳐서 전체적인 렌더트리를 만들고 렌더링 해야된다.

이 과정 속에서 왜 React 같은 Front 단 기술들을 써야 하는지 알 수 있다.

 

(1) 모든 변경사항을 반영하기엔 Cost가 크다.

부분적인 변경사항 하나가 생겼다고 모든 DOM을 처음부터 다시 생성하는건 아니다. 변경사항만 브라우저가 DOM 객체에서 업데이트 시켜주는건 똑같은데 해당변경사항을 DOM의 찾기위한 트리 탐색 과정에서 Cost가 꽤 크다는 것이다. 

 

(2)  결국 렌더링은 해야된다.

(동적으로) 100번의 DOM 수정이 가해졌다고 가정해보자. 이 경우 변경사항을 DOM에 반영하는 것뿐만 아니라 렌더링까지 해야되는데 이때 브라우저 내부적으로 100번의 렌더링을 모두 하진 않겠지만 (Batched) 다수의 렌더링 과정이 필요한건 사실이다. 따라서 React 코드들이 우선적으로 Virtual DOM을 통해 변경사항을 한번에 메모리에 반영을 해주고 실제 렌더링은 한번만 하게되면 렌더링 과정을 최소화 할 수 있다.

 

  • 리액트가 브라우저로 띄워지기 까지의 과정

https://reactjs.winterlood.com/5fe9b24e-69c9-4062-8f6e-68dc35f830f1 

 

3. 리액트 앱의 동작 원리 - 4. 리액트 시작하기

인사이트 도서 <한 입 크기로 잘라먹는 리액트> 를 미리 만나보세요

reactjs.winterlood.com

 

  • 번들링

https://velog.io/@jwo0o0/Web-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-%EB%B2%88%EB%93%A4%EB%A7%81%EC%9D%B4%EB%9E%80-Webpack

 

[Web] 🗂프론트엔드에서 번들링이란? / 🛠Webpack

↑ 위 사진은 초등학교 입학을 위한 제품 번들이다. 이런식으로 어떤 제품을 묶음으로 판매하는 것을 '번들링'한다고 한다.그럼 웹 개발을 할 때 '번들링'을 한다고 하면 무슨 의미일까?(참고로

velog.io

 

브라우저가 JS 엔진을 가지고 있다는것을 잊지말자.

index.html을 서버로부터 클라이언트 브라우저가 받으면 

 

이거처럼 budle.js 의 JS 파일을 가져오게 된다. 여기서 bundle이란 CSS, JS , HTML, 정적 리소스(이미지 등등) 를 하나로 번들링하여 묶어서 클라이언트 브라우저에게 보내게 된다. 

이러면 이제부터 위에서 언급했던 브라우저가 해당 JS를 실행하여 DOM 을 정적으로 바꾸던, 바로 실행을 하던 등등의 행위를 거쳐 최종적으로 렌더링하게 된다. 따라서 React의 import 나 export, 파일 url 등등은 모두 이 budle.js에서 번들링되어 넘겨주면 클라이언트쪽이 실행하게 된다. 

 

  • state

https://velog.io/@hamham/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-state%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

 

[리액트] state를 사용하는 이유

리액트에서 state를 사용하는 이유가 뭘까?

velog.io

일반 변수는 바꿨을 경우 자동으로 재랜더링 되지 않는다. 그러면 특정 값에 따라 렌더링을 다르게 해줘야하는 경우에는 state를 써줘야한다.

이는 일종의 변수처럼 사용되지만 값을 변경했을 경우 자동으로 다시 렌더링이 되기 때문에  값에 따라 렌더링을 변화해야한다면 state를 사용해야한다.

 

  • hook

Component는 2가지 방식인 function Component와 Class Component가 있었다. 근데 state 같은 경우만 봐도 Class는 상속받은 React.component의 멤버필드로 정의하면 됐지만 function은 그러하질 못한다. 따라서 Function Component에서도 이러한 State를 쓰거나 / LifeCycle에 따른 여러 메서드를 호출하기 위해서는 Hooks 라는 기능이 필요하다. 

LifeCycle에 따라 기존 Class Component에서 수행되었던 LifeCycle methods인 렌더링시(ComponentDidMount) , state 변화로 재렌더링시(componentDidUpdate) , 해당 컴포넌트가 DOM에서 이탈했을시 (componentWillUnmount) 의 메서드들을 Function Component 에서도 Hooks 를 이용하여 구현 가능하다는 것이다.

 

 

useEffect(이펙트함수,의존성 배열)
// 의존성 배열이 변화했을때 이펙트 함수가 수행됨.
// 의존성 배열이 없다면 렌더링될때마다(mount, update)
// 빈 의존성 배열이면 mount, unmount에만 수행됨

 

unmount에서만 수행되게 할려면 useEffect의 return을 이용

 

 

flex 크기 변화 

https://heewon26.tistory.com/275