croissant_code

리액트 올인원-4-React.js 본문

SW

리액트 올인원-4-React.js

crossfit_wod 2025. 10. 16. 22:38

React.js

오픈소스 JS 라이브러리

 

기술적인 특징

  • 컴포넌트를 기반으로 UI를 표현
  • 화면 업데이트 구현이 쉽다
  • 화면 업데이트가 빠르게 처리

컴포넌트란 구성요소를 의미한다. 화면을 구성하는 요소 UI를 구성하는 요소를 의미한다. 

컴포넌트를 구성

만약 컴포넌트를 구성하지 않는다면 공통적인 부분을 전구 만들어야 한다. 중복 코드가 또한 늘어난다.

컴포넌트 X

따라서 리액트에서는 중복 코드를 컴포넌트로 만들어서 처리한다.

컴포넌트 O

화면 업데이트에 관해서 알아보자. 사용자의 행동에 따라 웹 페이지가 모습을 바꾸는 것을 의미한다.

리액트는 선언형 프로그래밍이기 때문에 화면 업데이트가 쉽다. 여기서 선언형 프로그래밍이라는 것은 과정은 생략하고 목적만 간결히 명시하는 방식이다. (반대로는 명령형 프로그래밍, 목적을 이루기 위한 모든 일련의 과정을 프로그래밍하는 것)

 

 

state 값에 따라서 C 컴포넌트의 UI가 변경된다.

정리하면 리액트는 선언형 프로그래밍으로서 업데이트를 위한 동작을 정의할 필요없이 특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트할 수 있다.

빠른 화면 업데이트 처리를 할 수 있다.

먼저 선수 지식이 필요하다.

  • 브라우저 구동 방식
  • HTML CSS로 만든 페이지를 어떻게 랜더링
  • 화면 업데이트는 어떻게 처리

브라우저 구동 방식

Critical Rendering Path

HTML => DOM(Document Object Model, DOM이라는 것은 브라우저가 자기가 이해하기 쉬운 형태로 변경한 것)

CSS => CSSOM(CSS Object Model)

DOM(요소들의 위치, 배치, 모양에 관한 모든 정보) + CSSOM(요소들의 스타일 정보) => Render Tree(웹 페이지의 청사진)

Render Tree => Layout(요소의 배치를 잡는 작업) => Painting(실제로 화면에 그려내는 과정)

 

어떻게 업데이트가 처리될까?

업데이트는 JS가 DOM을 수정하면 업데이트가 발생한다.

그 중에서 Layout과 Painting은 시간이 오래 걸리는 과정이다.

오래 걸리는 과정

따라서 JS를 3000번을 수정하면 RenderTree 이후의 과정을 3000번 하는 것이기 때문에 성능이 약화가 된다.

<script>
    function onClick() {
    	const $ul = document.getElementById("ul");
        for (let i = 0; i < 3000; i++) {
        	$ul.innerHTML += `<li>${i}</li>`; // DOM 수정
        }
    }
</script>
<body>
	<button onClick="onClick()">리스트 추가하기</button>
    <ul id="ul"></ul>
</body>

3000 번 돔을 수정하기 때문에 4500ms 수행 => 성능이 좋지 않다

 

<script>
    function onClick() {
    	const $ul = document.getElementById("ul");
        let list = "";
        
        for (let i = 0; i < 3000; i++) {
        	list += `<li>${i}</li>`;
        }
        
        $ul.innerHTML = list; // DOM 수정
    }
</script>
<body>
	<button onClick="onClick()">리스트 추가하기</button>
    <ul id="ul"></ul>
</body>

DOM은 1번만 수행, 250ms

1번에 수정을 하도록 만들자

하지만 서비스의 규모가 커질 수록 힘들다. 따라서 React는 이 과정을 자동으로 해준다.(Virtual DOM)

 

Virtual DOM이라는 것은 DOM을 JS 객체로 흉내낸 것으로 일종의 복제판이라고 생각하자. React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해본다.

Virual DOM

 

React 설치 및 설명

public 폴더 : 정적인 리소스 ex) 이미지

jsx 타입

eslint : 개발자 코드 스타일 통일화

gitignore

index.html : 리액트의 기본 틀

vite.config.js : 비트 도구 설정

React App 구동원리

리액트를 npm run dev를 하면 node를 구동해서 Web Server를 구동한다. 따라서 현재 가동중인 웹 서버의 주소가 나온다.

 

src/main.jsx => index.html(동적으로 추가되는 요소들)

'SW' 카테고리의 다른 글

원격 SSH 접근 환경 만들기  (1) 2025.11.25
리액트 올인원-3-Node.js  (0) 2025.10.15
리액트 올인원-1-자바스크립트 기본  (0) 2025.10.15
Clean Architecture  (4) 2025.08.07
IT 이직하기 위한 단어 정리  (2) 2025.07.12
'SW' Related Articles more