ReactNextCentral

리액트 기초와 시작하기

Published on
리액트와 Next.js 소개, 사용자 인터페이스(UI) 렌더링, 자바스크립트로 UI 업데이트하기, 리액트 시작하기
Table of Contents

1장: 리액트와 Next.js에 대하여

Next.js는 빠르고 풀스택 웹 애플리케이션을 만들기 위한 구성 요소를 제공하는 유연한 리액트 프레임워크입니다.

그렇다면 이 말은 무엇을 의미할까요? 리액트와 Next.js가 웹 애플리케이션을 구축하는 데 어떻게 도움이 되는지에 대해 자세히 알아보겠습니다.

웹 애플리케이션의 구성 요소

현대 애플리케이션을 구축할 때 고려해야 할 몇 가지가 있습니다.

  • 사용자 인터페이스: 사용자가 애플리케이션을 어떻게 사용하고 상호작용할지에 대한 부분입니다.
  • 라우팅: 사용자가 애플리케이션의 다른 부분 사이를 어떻게 이동하는지에 대한 부분입니다.
  • 데이터 가져오기: 데이터가 어디에 있고 어떻게 가져올지에 대한 부분입니다.
  • 렌더링: 정적이나 동적 콘텐츠를 언제 어디서 렌더링할지에 대한 부분입니다.
  • 통합: 사용하는 제삼자 서비스(CMS, 인증, 결제 등)와 어떻게 연결하는지에 대한 부분입니다.
  • 인프라: 애플리케이션 코드를 어디에 배포하고 저장하며 실행할지에 대한 부분입니다(서버리스, CDN, 엣지 등).
  • 성능: 최종 사용자를 위해 애플리케이션을 어떻게 최적화할지에 대한 부분입니다.
  • 확장성: 팀, 데이터 및 트래픽이 성장함에 따라 애플리케이션이 어떻게 적응하는지에 대한 부분입니다.
  • 개발자 경험: 애플리케이션을 구축하고 유지하는 팀의 경험에 대한 부분입니다.

애플리케이션의 각 부분에 대해 직접 구축할지 아니면 패키지, 라이브러리, 프레임워크와 같은 다른 도구를 사용할지 결정해야 합니다.

리액트란?

리액트는 상호작용적인 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.

여기서 사용자 인터페이스(UI)란 사용자가 화면에서 보고 상호작용하는 요소들을 말합니다. 리액트 소개

라이브러리란 리액트가 UI를 구축하는데 도움이 되는 유용한 함수(API)를 제공하지만 그 함수들을 애플리케이션 내 어디에 사용할지는 개발자에게 달려있다는 의미입니다.

리액트의 성공 비결 중 하나는 애플리케이션 구축의 다른 측면에 대해 상대적으로 의견을 많이 내지 않는다는 것입니다. 이로 인해 Next.js를 포함한 제삼자 도구와 솔루션의 생태계가 번창했습니다.

하지만 이는 또한 리액트 애플리케이션을 처음부터 완성시키는 데 어느 정도 노력이 필요하다는 것을 의미합니다. 개발자는 도구 구성과 일반적인 애플리케이션 요구사항에 대한 솔루션을 재창조하는 데 시간을 할애해야 합니다.

Next.js란?

Next.js는 웹 애플리케이션을 만들기 위한 구성 요소를 제공하는 리액트 프레임워크입니다.

프레임워크란 Next.js가 리액트에 필요한 도구와 구성을 처리하고 애플리케이션에 추가 구조, 기능, 최적화를 제공한다는 의미입니다.

Next.js 아키텍처

리액트로 UI를 구축한 다음 라우팅, 데이터 가져오기, 캐싱과 같은 일반적인 애플리케이션 요구사항을 해결하기 위해 Next.js 기능을 점진적으로 도입할 수 있습니다 - 모두 개발자와 최종 사용자 경험을 개선하면서 말이죠.

개인 개발자든 대규모 팀의 일원이든 리액트와 Next.js를 사용하여 완전히 상호작용적이고 매우 동적이며 성능이 우수한 웹 애플리케이션을 구축할 수 있습니다.

다음 장에서는 리액트와 Next.js로 시작하는 방법에 대해 논의할 것입니다.

2장: 사용자 인터페이스(UI) 렌더링

리액트가 어떻게 작동하는지 이해하려면 먼저 브라우저가 코드를 해석하여 사용자 인터페이스(UI)를 만들거나 렌더링하는 방법에 대한 기본적인 이해가 필요합니다.

웹 페이지를 방문할 때 서버는 브라우저에 HTML 파일을 반환합니다. 그 모습은 다음과 같을 수 있습니다. HTML 및 DOM 구조

그러면 브라우저가 HTML을 읽고 문서 객체 모델(DOM)을 구성합니다.

DOM이란?

DOM은 HTML 요소의 객체 표현입니다. 코드와 사용자 인터페이스 사이의 다리 역할을 하며 부모와 자식 관계를 가진 트리 구조를 가집니다. 왼쪽에 DOM 트리, 오른쪽에 렌더링된 UI를 보여주는 두 개의 나란한 다이어그램

DOM 메서드와 자바스크립트를 사용하여 사용자 이벤트를 듣고 사용자 인터페이스에서 특정 요소를 선택, 추가, 업데이트 및 삭제하여 DOM을 조작할 수 있습니다. DOM 조작을 통해 특정 요소를 대상으로 할 뿐만 아니라 그 스타일과 내용을 변경할 수 있습니다.

다음 장에서는 자바스크립트와 DOM 메서드를 사용하는 방법을 배우게 됩니다.

3장: 자바스크립트로 UI 업데이트하기

이 장에서는 자바스크립트와 DOM 메서드를 사용해 프로젝트에 h1 태그를 추가하는 작업을 시작합니다.

코드 에디터를 열고 새로운 index.html 파일을 만듭니다. HTML 파일 안에 다음 코드를 추가하세요.

index.html
<html>
  <body>
    <div></div>
  </body>
</html>

그 다음 div에 고유한 id를 주어 나중에 대상으로 삼을 수 있게 합니다.

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

HTML 파일 내부에 자바스크립트를 작성하려면 script 태그를 추가합니다.

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

이제 스크립트 태그 안에서 getElementById() 같은 DOM 메서드를 사용해 id로 div 요소를 선택할 수 있습니다.

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

DOM 메서드를 계속 사용하여 새 h1 요소를 만듭니다.

index.html
<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // '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);
    </script>
  </body>
</html>

모든 것이 잘 작동하는지 확인하기 위해 선호하는 브라우저 내에서 HTML 파일을 엽니다. 'Develop. Preview. Ship.'이라고 쓰인 h1 태그를 볼 수 있어야 합니다.

HTML 대 DOM

브라우저 개발자 도구 내의 DOM 요소를 살펴보면 h1 요소가 DOM에 포함된 것을 알 수 있습니다. 페이지의 DOM은 소스 코드, 즉 처음에 만든 HTML 파일과 다릅니다. HTML 코드

이는 HTML이 초기 페이지 콘텐츠를 나타내는 반면에 DOM은 자바스크립트 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타내기 때문입니다.

단순 자바스크립트로 DOM을 업데이트하는 것은 매우 강력하지만 장황합니다. 텍스트가 있는 h1 요소를 추가하기 위해 이 모든 코드를 작성했습니다.

index.html
<script type="text/javascript">
  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);
</script>

앱이나 팀의 크기가 커짐에 따라 이런 방식으로 애플리케이션을 구축하는 것이 점점 더 도전적일 수 있습니다.

이 접근 방식으로 개발자는 컴퓨터에게 어떻게 해야 하는지 지시하는 데 많은 시간을 보냅니다. 하지만 컴퓨터가 DOM을 어떻게 업데이트할지 스스로 파악하게 하면서 보여주고 싶은 것을 설명할 수 있다면 어떨까요?

명령형 대 선언형 프로그래밍

위의 코드는 명령형 프로그래밍의 좋은 예입니다. 사용자 인터페이스가 어떻게 업데이트될지에 대한 단계를 작성하고 있습니다. 하지만 사용자 인터페이스를 구축할 때는 종종 개발 과정을 가속화할 수 있는 선언형 접근 방식이 선호됩니다. DOM 메서드를 작성하는 대신 개발자가 보여주고 싶은 것(이 경우 텍스트가 있는 h1 태그)을 선언할 수 있다면 도움이 될 것입니다.

즉, 명령형 프로그래밍은 셰프에게 피자를 만드는 단계별 지시를 내리는 것과 같습니다. 선언형 프로그래밍은 피자를 만드는 단계에 대해 걱정하지 않고 피자를 주문하는 것과 같습니다.

리액트는 사용자 인터페이스를 구축하기 위해 사용할 수 있는 인기 있는 선언형 라이브러리입니다.

리액트: 선언형 UI 라이브러리

개발자로서 리액트에게 사용자 인터페이스에 무슨 일이 일어나길 원하는지 말할 수 있고 리액트는 당신을 대신해 DOM을 어떻게 업데이트할지 단계를 파악합니다.

다음 장에서는 리액트로 시작하는 방법을 탐색할 것입니다.

4장: 리액트로 시작하기

새로 만든 프로젝트에서 리액트를 사용하려면 unpkg.com이라는 외부 웹사이트에서 두 가지 리액트 스크립트를 불러와야 합니다.

  • 리액트는 핵심 리액트 라이브러리입니다.
  • 리액트 돔은 리액트를 DOM과 함께 사용할 수 있게 하는 DOM 특정 메서드를 제공합니다.
index.html
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" />
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" />
    <script type="text/javascript">
      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);
    </script>
  </body>
</html>

일반 자바스크립트로 직접 DOM을 조작하는 대신 이전에 추가한 DOM 메서드를 제거하고 ReactDOM.createRoot() 메서드를 추가하여 특정 DOM 요소를 대상으로 삼고 리액트 컴포넌트를 표시할 루트를 생성하세요. 그 다음 root.render() 메서드를 추가하여 리액트 코드를 DOM에 렌더링하세요.

이는 리액트에게 우리의 h1 제목을 #app 요소 안에 렌더링하라고 지시합니다.

index.html
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" />
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" />
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" />
    <script type="text/jsx">
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

이 코드를 브라우저에서 실행하면 구문 오류가 발생합니다.

Uncaught SyntaxError: expected expression, got '<'

이는 h1...h1이 유효한 자바스크립트가 아니기 때문입니다. 이 코드 조각은 JSX입니다.

JSX란?

JSX는 자바스크립트의 문법 확장으로 HTML과 유사한 문법으로 UI를 기술할 수 있게 합니다. JSX의 좋은 점은 HTML과 자바스크립트 외에 새로운 기호나 문법을 배울 필요가 없다는 것입니다. 단 세 가지 JSX 규칙을 따르면 됩니다.

하지만 브라우저는 기본적으로 JSX를 이해하지 못하므로 JSX 코드를 일반 자바스크립트로 변환하기 위해 Babel과 같은 자바스크립트 컴파일러가 필요합니다.

프로젝트에 Babel 추가하기

프로젝트에 Babel을 추가하려면 index.html 파일에 다음 스크립트를 복사하여 붙여넣으세요.

index.html
<script src="https://unpkg.com/@babel/standalone/babel.min.js" />

또한 스크립트 유형을 type=text/jsx로 변경하여 Babel이 변환해야 할 코드를 알려줘야 합니다.

index.html
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" />
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" />
    <!-- Babel 스크립트 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" />
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

정상적으로 작동하는지 확인하기 위해 브라우저에서 HTML 파일을 엽니다.

방금 작성한 선언적 리액트 코드:

index.html
<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

이전 섹션에서 작성한 명령형 자바스크립트 코드와 비교해보세요.

index.html
<script type="text/javascript">
  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);
</script>

리액트를 사용하면 반복되는 많은 코드를 줄일 수 있다는 것을 알 수 있습니다.

리액트가 바로 그런 일을 하는 라이브러리로 대신해 주는 작업들 - 이 경우 UI 업데이트 - 에 대해 재사용 가능한 코드 조각을 포함하고 있습니다.

리액트를 위한 필수 자바스크립트

자바스크립트와 리액트를 동시에 배울 수 있지만 자바스크립트에 익숙하다면 리액트 학습 과정이 더 쉬워집니다.

다음 섹션에서는 자바스크립트 관점에서 리액트의 몇 가지 핵심 개념을 소개할 것입니다. 여기 자바스크립트 주제 요약이 있습니다.

이 과정은 자바스크립트에 깊게 다루지 않지만 최신 버전의 자바스크립트를 계속해서 배우는 것이 좋은 습관입니다. 하지만 자바스크립트에 아직 능숙하지 않다면 리액트로 빌드를 시작하는 것을 막지 말아야 합니다!

리액트를 사용하여 사용자 인터페이스를 구축할 때는 선언적 코드를 작성하게 됩니다. 이 방식은 브라우저가 JSX를 이해하지 못하기 때문에 Babel과 같은 컴파일러를 사용하여 JSX를 일반 자바스크립트로 변환해야 합니다. 이 과정을 통해 브라우저가 실행할 수 있는 코드로 변환되어, 리액트가 DOM을 업데이트하는 방식을 자동화할 수 있습니다.

선언적 프로그래밍은 개발 과정을 단순화하고, 더 빠르게 UI를 구성할 수 있게 해 줍니다. 리액트와 같은 라이브러리를 사용하면, 개발자는 UI가 어떻게 보일지 설명만 하면 되고, 리액트가 그에 따른 DOM 업데이트 방법을 알아서 처리합니다. 이는 리액트가 사용자 인터페이스를 구축하는 데 있어 매우 유용한 도구가 되게 합니다.

리액트를 사용하면서 자바스크립트의 기본적인 개념들을 이해하는 것은 매우 중요합니다. 함수, 객체, 배열, ES 모듈 같은 자바스크립트의 핵심 개념들이 리액트 개발에서 자주 사용되기 때문입니다. 이러한 개념들을 숙지하면 리액트로 더 효율적이고 효과적인 웹 애플리케이션을 구축하는 데 도움이 될 것입니다.

따라서 리액트를 배우는 과정에서 자바스크립트에 대한 이해도를 높이는 것은 리액트 개발에 있어 큰 도움이 됩니다. 자바스크립트와 리액트를 함께 학습하면서, 개발 능력을 향상시켜 나가는 것이 좋습니다.