홍준혁

React.js 이해하기 (1) 본문

React.js

React.js 이해하기 (1)

홍준혁 [Hong-JunHyeok] 2024. 4. 2. 13:41
728x90

퇴사하고 거의 4개월 만에 개발을 시작해 보는 것 같다. 그동안 난 스타벅스에서 아르바이트했다.

스벅에서 일하는 동안 나는 리암 갤러거로 살았다 ㅎㅎ

 

이제 나도 취업을 해야 하니... 달리려고 한다. (그동안 집필을 쉬었었는데 퇴사하고 잘 집필하고 있다)

미리보기...

 

늘 그랬듯 개발 시장은 빠르게 변화하는 것 같다. 그래서 적응기가 필요해서 글을 작성하면서 공부를 하려고 한다.

먼저 Next.js를 배우기 전에 React.js를 이해하여야 한다. 어쨌든 기본 베이스는 React.js 위에서 만들어지니까.

 

웹 서비스를 만들기 위해서는 다양한 사항을 고려해봐야 한다. 

UI, Routin, Data Fetching, Rendering, Infra 등... 

어느 하나 안 중요한 게 없이 신경 써야 할 것들이 많다. 

 

그래서 이를 쉽게 구현할 수 있는 라이브러리를 선택하는 것도 중요한데 제일 유명한 게 React.js다. 

공식문서에서 설명하길 대화형 사용자 인터페이스를 구축하기 위한 JS 라이브러리라고 하는데, 

 

그러면 일단 사용자 인터페이스라는 건 뭘까? 소위 말하는 UI인데 이는 사용자와 화면이 있다면 서로 상호작용하는 요소를 의미한다. 

React는 UI를 구축하기 위해서 다양한 함수들을 제공해 준다. 하지만 라이브러리 특성상 결정은 항상 개발자의 몫이다.

반대로 프레임워크는? 결정은 프레임워크가 하고 개발자는 그와 반대이다.

 

Next는 일단 React 프레임워크다. 

React 라이브러리를 Next 프레임워크로 구현한 것이다. 

약간 먹이사슬처럼 보이는데

JavaScript > React.js > Next.js 

아무튼 이러한 구조 때문에 React로 구현된 프로젝트로 점진적으로 Next.js로 변경할 수 있다고 한다. 

 

사용자가 웹사이트를 방문하게 되면 서버는 브라우저에 HTML 파일을 반환한다. 

그리고 브라우저는 이를 읽고 DOM을 구성한다. 이때 이 DOM이라는 게 엄청 중요하다.

 

HTML의 요소를 객체로 표현한 거라고 보면 된다. 왜 굳이 굳이 객체로 표현하냐면... 브라우저가 이해할 수 있어야 하기 때문이다. 

코드는 개발자 보기 편하라고 있는 거지 브라우저는 DOM을 읽는다. 

 

이해하기 쉽게 

<! DOCTYPE HTML>
<html>
<head>
  <title> About elk </title>
</head>
<body>
  The truth about elk.
</body>
</html>

 

이것은 HTML 코드이고 DOM으로 변환하면

이런 식으로 객체로 표현되는 것이다.

 

자세한 내용은 https://javascript.info/dom-nodes 여기서 아주아주 잘 다루고 있다. 나도 잘 몰랐던 흥미로운 내용들이 있는데

- 주석도 DOM 트리에 반영된다.

- HTML코드를 잘못 작성하여도 DOM 변환 과정 중에서 보정이 된다. 

 

등등... DOM은 파도파도 재밌다... 재밌네... ㅎㅎ... HTML을 작성하면 DOM 객체로 변화하는 것을 시각화 한 서비스도 있으니까 한번 확인해 보면 좋을 것 같다. https://software.hixie.ch/utilities/js/live-dom-viewer/

 

아무튼 React든 Vanilla JS든 DOM은 웹 사이트를 구성하는데 매우 중요한 요소이므로 짚고 넘어가야 한다. 

여러분도 알듯, DOM을 JS를 이용하여 수정할 수 있다. 

 

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

 

이러한 HTML코드가 있다고 가정해 보자.  script 태그 안에 id를 선택해 보도록 하자

 

<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

 

이제 app이라는 인스턴스를 취득했으니, createElement 함수를 통해서 요소를 추가하는 작업을 해보자. 

 

      // 'app' id를 가진 div 요소 선택
      const app = document.getElementById('app');

      // 새로운 H1 요소 만들기
      const header = document.createElement('h1');

      // H1 요소용 새 텍스트 노드 생성
      const text = 'Develop. Preview. Ship. 🚀';
      const headerContent = document.createTextNode(text);

      // 텍스트를 H1 요소에 추가
      header.appendChild(headerContent);

      // H1 요소를 div 안에 배치
      app.appendChild(header);

 

이렇게 하고 HTML을 실행하면 화면에 h1태그로 Develop. Preview. Ship.이라고 잘 나올 것이다.

어쨌든 코드로 수정을 했으니 원본 HTML에서는 빈 내용이었는데 JS로 이가 업데이트 되었다. 

DOM 요소로 간단하게 내용을 추가했는데 엄청나게 코드가 길게 나와버렸다. 

 

여기서 또 중요한 이론이 나오는데 명령형 프로그래밍과 선언형 프로그래밍이다.

위와 같은 방식으로 작성한느 것이 명령형 프로그래밍이다. 말 그대로 명령하고 있다. 어떻게 업데이트를 해야 하는지에 대한 단계를 명시해 놓은 것이다. 어떤 동작을 하는지 알 수 있어서 직관적이긴 하나, 알고 싶은 정보가 너무 많다. 우리는 무엇을 표현해야 하는지만 알고 싶을 뿐이다. 

 

과정과 결과를 두고 항상 뭐가 더 중요하냐고 얘기한다. 적어도 코드를 쓰는 개발자 입장에서는 결과가 더 중요하기 않겠는가?

그래서 선언형 프로그래밍은 뭘 구현할 건지 선언만 하는 것이다. 나머지는? React가 알아서 뚝딱뚝딱해주는 것이다. 

이것이 생산력에 있어서 정말 크게 작용한다. 

 

Vanilla JS로 작성한 명령형 코드 

  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship. 🚀';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);

 

리액트로 작성한 선언형 코드 

  const app = document.getElementById("app")
  ReactDOM.render(<h1> Develop. Preview. Ship. 🚀</h1>, app)

 

좀 더 자세한 내용은 React 쇼핑몰 프로젝트 책이 나오면 한 번씩 봐달라 헤헤

 

 

728x90

'React.js' 카테고리의 다른 글

React Hook 동작원리와 Custom Hook사용이유  (3) 2022.06.26
Context API는 왜 쓰고, 그렇다면 Redux는 필요없을까?  (7) 2022.06.23
리액트 컴포넌트 설계 방법  (0) 2022.06.22
효율적인 모달 관리  (0) 2022.06.15
React-Query로 무한스크롤 구현하기  (0) 2022.06.15
'React.js' Related Articles more
Comments