개발

React의 탄생 계기와 작동 방식에 대해 알아보자.

woojin06 2025. 2. 27. 18:32

1. react의 등장 계기

페이스북 개발자들은 페이스북이 정형화 되고 기능이 많아질수록 코드의 유지보수와 가독성이 떨어져 새로운 기능을 만들기 힘들어지며 이를 해결 할 방안을 찾다가 리엑트를 만들게 되었습니다.

2. 돔의 구조와 이해

react의 작동 방식에 들어가기 앞서 돔의 개념부터 재탐색을 해볼게요

 

Dom은 웹 사이트에  접속하면 보이는 버튼 혹은 메뉴 등이 모여 하나의 페이지를 만든다. 이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 DOM이다.

출처: https://yong-nyong.tistory.com/80

위 사진은 돔의 구조를 이미지화 했을때 화면이다 이처럼 트리 구조를 띄기 때문에 하나의 값이 변경되면 그 값을 변경하기 위해 모든곳을 리랜더링(새로고침)을 하게 된다. 이렇게 된다면 문제점이 하나의 값만 수정해도 모든 페이지를 불러와 새로고침 되어 시간도 오래걸리고 사용자들도 불편해진다. 이러한 문제점을 막기위해 생긴것이 바로 리엑트라고 할 수 있다.

2 - 2. 리엑트의 랜더링

React가 웹을 랜더링 하는 구조를 알려드릴게요.

 

1. 웹 주소창에 아무 도메인을 검색해 들어가줍니다.  ex) www.woojin06.tistory.com 

2. 해당 페이지로 들어가게 되면 클라이언트(웹 브라우저)는 서버로 요청을 하나 보내게 됩니다. 그리고 클라이언트는 응답으로 index.html과 App.js를 받습니다.( 리엑트는 SPA 를 이용하기 때문에 index.html 파일은 단 하나만 존재할 수 있습니다.)

3. 서버로부터 받은 파일들을 토대로 위에서 배운 render Tree를 구성하고, 이를 바탕으로 웹 페이지에 렌더링을 해줍니다.

출처: https://velog.io/@juno7803

해당 이론들을 이미지화 한다면 위처럼 나옵니다.

 

근데 그렇다면 SPA 는 무엇일까요 SPA란 처음에 모든 화면을 서버를 통해 불러오고 그 후엔 서버와 요청을 하지 않는 방식을 말합니다. 하지만 이 모든 과정은 위에 index.html 과 App.js에 받아올 수 있을까요 이 방법을 번들러 작업을 통해 해결해줍니다.

 

2 - 3. 가상돔

자 이제 다 알아봤으니 가상돔이 뭔지 알아볼까요.

React에는 state와 props 라는 친구들이 존재합니다. 해당 친구들은 화면을 래런더링해주는 친구라고 생각하면 됩니다.

 

React가 랜더링 되는 방식

  1. props가 변경될 때
  2. State가 변경될 때
  3. 부모 컴포넌트가 렌더링 됐을때

위의 설명과 같이, React는 상태나 속성값이 변하게 되면 리랜더링을 통해 화면의 텍스트나 변경된 값을 갱신(리랜더링)합니다. 말 그대로 바뀐값들을 다시 그린다 라고 생각하시면 됩니다.

 

React는 값이 변할때 화면의 깜빡임 없이 바로바로 값이 변경되는데 이 이유는 바로 가상돔이라는 친구에게 있습니다.

https://velog.io/@tamxt4047/%EA%B0%80%EC%83%81-%EB%8F%94vertual-DOM

만약 상태나 값이 변경된 경우 변경된 값으로 React는 가상의 돔을 하나 그리게 됩니다. 그리고 가상돔과 화면에 있는 실제 돔을 비교해 변경된 사항을 실제돔에 수정하는 형태를 뜁니다.

 

예시로 코드를 하나 보여드릴게요

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

 

해당 코드는 Button을 눌렀을때 count의 숫자를 +1씩 증가시기는 코드입니다. 앞서 언급한대로 아무 상호작용도 하지 않았을땐 state에 초기값인 0이 화면에 보이지만 버튼을 누르면 Clicked 1 times 처럼 값이 1씩 증가합니다 count는 state에 담겨있기 때문에 처음 랜더링 된 값과 상호작용을 했을때 화면에 있는 DOM과 가상DOM을 비교해 바뀐 값을 반영해 새로 그리는 원리입니다. 그렇기에 생긴것 자체는 html 마크업과 다름없지만 생김새만 같을뿐 전혀 다른 친구들입니다. 만약 해당 코드에서

function MyButton() {
  let count = 0

  function handleClick() {
    count = count + 1
    console.log(count)
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

로 바꾸게 된다면 콘솔에는 값이 증가하지만 화면상에는 증가를 하지 않습니다. 이 경우 react는 바뀐 상태가 없다고 판단하여 리랜더링을 하지 않게 되는것이죠.

 

마무리 정리

  1. 리엑트는 기존 바닐라Js개발자들이 코드가 늘어나거나 새로운 기능이 많아질수록 유지보수와 랜더링 시간이 너무 오래걸려 해당 문제점을 해결하기위해 만들어졌다.
  2. react는 spa로 처음에 서버에 요청을 해 모든 페이지를 받아오고 그 후엔 서버와 통신을 하지 않는다.
  3. react 화면에 있는 실제 돔과 react의 가상돔을 비교해 바뀐부분만 랜더링 시켜준다 그리고 해당 상태는 Hook 을 통해 관리할 수 있다.

 

혹여나 개념적으로 틀린 부분이나 오타는 댓글로 알려주시면 감사하겠습니다.

급하게 만든거다보니 완벽하지 않을수도