코드잇스프린트 #스프린트프론트엔드7기 #취업까지달린다(3)
-
리액트 생명주기, 렌더링 방식 특징
[1] 리액트 생명주기 (Life Cycle)Lifecycle = 생명주기사람의 생명주기 : 출생 후 인생을 살다가 노화로 사망리액트 컴포넌트도 이러한 생명주기를 가지고 있음컴포넌트가 생성되는 시점과 사라지는 시점이 정해져있음출생,인생,사망으로 나뉘어져 있음각 과정의 초록색 표시부분은 생명 주기에 따라 호출되는 클래스 컴포넌트 함수해당 함수를 Lifecycle Method라고 불리며, 번역하면 생명 주기 함수먼저 컴포넌트가 생성되는 시점 (사람으로 말하면 출생)이 과정을 "마운트"라고 부르는데 이때 컴포넌트의 constructor(즉 생성자)가 생성생성자에서는 컴포넌트의 state를 정의컴포넌트가 렌더링 되며, 이후에 ComponentDidmount 함수가 호출태어난 모두는 각자 인생을 살아감사람은 인생..
2024.05.28 -
[React] Virtual DOM, key
[1] 가상 돔 (Virtual Dom) DOM : (Documnet object model)웹페이지에 들어가 있는 html element 들을 tree형태 구조로 표현한 것DOM이 제공하는 API를 통해 DOM 구조에 접근하고, 원하는 Element에 구조,내용,스타일을 변경 가능 (DOM 조작)자바스크립트 getElementById(), querySelector() 같은 API를 통해서 DOM구조 안에 있는 Element에 접근해서 원하는대로 내용,스타일,레이아웃등을 수정할 수 있음. 가상돔 (Virtual Dom) 실제 DOM의 복사본 (실제 DOM X) 모든 Elemnet와 속성을 똑같이 가지고 있음 실제 DOM과는 다르게 브라우저 문서에 직접적으로 연결 X => 수정 XReact는 가상 DOM..
2024.05.22 -
브라우저의 동작원리와 var,let,const의 관점
[1] 브라우저의 동작원리 1.사용자 : 브라우저로 웹 사이트 접속2.브라우저 : DNS를 통해 서버의 IP주소를 파악3.브라우저는 파악한 IP주소에 있는 서버와 3way handshake 완료4.서버에 데이터를 요청하는 HTTP Request를 합니다.5.서버로부터 데이터를 받는데 이것을 HTTP Response6.서버로부터 받은 데이터에 HTML을 Parsing하여 Dom Tree를 만듦7.중간에 Style 태그가 나오면 CSS를 Parsing하여 CSSOM Tree를 만듦8.Parsing 중간에 Script 태그가 나오면 JavaScript 엔진에게 권한을 넘겨자바스크립트 코드를 Parsing 하여 AST를 만들고 실행9.DomTree와 CSSOM 트리를 합쳐서 Render Tree 생성 (=> C..
2024.05.18