Hello,

안녕하세요저는 프론트엔드 개발을 하고 있는 김현수 입니다.Javascript, React 개인 스터디를 위해 만든 페이지 입니다.React NextJS 환경으로 구성되었습니다.FrontEnd 기본적인 내용을 정리, 지속적인 업데이트 예정입니다.

브라우저 렌더링(Browser Rendering)

1. 렌더링 엔진이 HTML 문서를 Parsing 해서 DOM Tree를 만들고, CSS파일은 CSSOM Tree를 만듭니다.
2. 이 두개를 결합해서 Render Tree를 생성합니다.
3. 생성된 렌더트리 안에 있는 각 노드의 위치와 크기를 계산하는 Layout 작업 후에,
4. 픽셀로 변환해서 레이어를 만드는 Paint 작업과 실제 화면에 합성해서 그려지는 Composite 작업으로 렌더링이 끝이 납니다.
* 요소의 내용, 크기, 위치가 변경, 윈도우 리사이징, 노드의 추가 제거 시,다시 Layout 과, Paint 작업을 반복하고, 이것을 Reflow 와 Repaint라고 합니다.

1. Virtual DOM은 실제 DOM 노드 트리를 복제한 자바스크립트 객체입니다.
2. Virtual DOM은 실제 DOM과 같은 UI구조와 클래스 스타일, 속성들을 갖고 있지만, 화면에 직접적인 변화를 줄수 있는 DOM API는 갖고있지 않습니다.
3. 돔 노드에 변화가 생기면, 새로운 DOM Tree를 생성합니다. 기존에 DOM 노드와 비교를 하고 변경된 부분만 업데이트를 합니다.
4. 변화들을 전부 Virtual DOM에 반영한 후에 변경된 부분만 모아서 실제 DOM에 한번만 적용하면서 성능을 최적화 하는 구조로 사용되고 있습니다.

* 웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 Layout을 구성하고,
* 페이지를 Repaint 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것입니다.
* 그리고 이 렌더링 과정은 상황에 따라 여러번 반복하여 발생할 수 있고, 돔이 추가,삭제 혹은 태그 위치가 변하는 경우 렌더링이 일어납니다.
* 속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자 가상돔(Virtual DOM)이 나왔습니다.

React의 모든 컴포넌트는 생성될때(Mounting), 업데이트할때(Updating), 제거할때(Unmounting) 3가지 주요 단계를 통해 관리된다.
Mounting (컴포넌트 생성)
1. constructor
– constructor 메소드는 컴포넌트가 초기화될 때 다른 어떤 메소드보다 먼저 호출되며, state 와 다른 초기 값들을 세팅한다.

2. getDerivedStateFromProps
– getDerivedStateFromProps 메소드는 DOM에서 요소들이 랜더링 되기 직전에 호출된다.
– 최초의 props 에 기반한 state 객체를 저장한다. state 를 인자로 받고, state 가 변하면 객체를 반환한다.
3. render
– render() 메소드는 필수값이며, DOM에 HTML을 표현해준다.
4. componentDidMount
– componentDidMount() 메소드는 컴포넌트가 랜더링된 직후에 호출된다.
– 이미 DOM에 위치한 컴포넌트를 필요로 하는 구문을 사용하는 곳이다.

React 버전 16.8부터 React 요소로 새로 추가되었습니다.
Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

예제: * 초기 state 값은 0 입니다.; * 아래 버튼 클릭 시 1 ~ 99 사이의 숫자를 useState를 통해 state값을 업데이트 하고 있습니다.; * state 값 : 0

import

import React, { useState } from "react";

선언

const [(상태값 저장변수), (상태값 갱신함수)] = useState((상태초기값));

// ex) 초기값이 0인 상태값 isSample.
const [isSample, setSample] = useState(0);

// isSample 값을 2로 업데이트.
setSample(2);

프로젝트의 규모가 점점 커지면서 컴포넌트가 늘어나고, 구조가 복잡해지면서 관리해야 할 state 가 많음.
React 프로젝트에서 state의 전달 방식은 props를 통해 이루어지기 때문에, 컴포넌트 구조가 복잡할수록 state drilling이 발생됨.
state drilling 이란, 상위 컴포넌트의 state를 하위 컴포넌트로 계속해서 전달해 목표 컴포넌트까지 props를 통해 전달하는 행위를 의미. 이는 컴포넌트 구조가 복잡한 프로젝트의 경우, 비효율적 구조와 소스의 가독성도 떨어짐.

작성중..

const ..