Programming/nextjs

Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(2)

조용장 2022. 3. 31. 18:30

저번에 이어서 기본을 배우기 위해 계속 진행하겠습니다.

 

react 시작하기

프로젝트에서 React를 사용하려면 https://unpkg.com/ 라는 외부 웹사이트에서 2개의 React 스크립트를 로드할 수 있다.

- react.development.js 는 핵심 React 라이브러리이다.

- react-dom.development.js는 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공한다.

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

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

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

 

일반 JavaScript로 DOM을 직접 조작하는 대신 react-dom의 ReactDOM.render()메서드를 사용하여 #app 요소 내에서 <h1> 제목을 렌더링하도록 React에 지시할 수 있다.

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

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app')
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
    </script>
  </body>
</html>

 

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

이유는 <h1>...</h1>이 유효하지 않는 자바스크립트이기 때문입니다. 이 코드는 jsx입니다.

 

JSX는 무엇인가?

JSX는 HTML과 유사한 구문으로 UI를 설명할 수 있는 JavaScript용 구문 확장입니다.

JSX의 좋은 점은 다음 세 가지 JSX 규칙을 제외하고는 HTML 및 JavaScript 외부에서 새로운 기호나 구문을 배울 필요가 없다는 것입니다

 

브라우저는 JSX를 기본적으로 이해하지 못하므로 JSX 코드를 일반 JavaScript로 변환하려면 Babel과 같은 JavaScript 컴파일러가 필요합니다.

 

프로젝트에 Babel 추가하기

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

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

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

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

이제 브라우저에서 코드를 실행하여 올바르게 작동하는지 확인할 수 있다.

 

방금 작성한 선언형 React 코드를 비교하면 다음과 같다.

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

이전 섹션에서 작성한 명령형 JavaScript 코드는 아래과 같다.

<script type="text/javascript">
  const app = document.getElementById('app')
  const header = document.createElement('h1')
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀')
  header.appendChild(headerContent)
  app.appendChild(header)
</script>

React를 사용하여 반복적인 코드를 많이 줄일 수 있는 방법을 볼 수 있다.

이것이 바로 React가 하는 일이며, 사용자를 대신하여 작업을 수행하는 재사용 가능한 코드 스니펫이 포함된 라이브러리이다.

 

React를 위한 필수 자바스크립트

JavaScript와 React를 동시에 배울 수 있지만 JavaScript에 익숙해지면 React를 배우는 과정이 더 쉬워질 수 있다.

다음에 다루어볼 Javascript 관점의 React 핵심 개념을 몇가지 소개한다.

아래에 나온 javascript 주제에 대한 요약이다.

 

이 과정에서는 JavaScript에 대해 자세히 다루지 않지만 최신 버전의 JavaScript를 사용하는 것이 좋습니다.

그렇다고 JavaScript에 능숙하지 않다고 느끼더라도 React로 빌드를 시작하는 데 문제되는 요소는 아니다.

 

React 핵심 개념

React 애플리케이션 구축을 시작하기 위해 익숙해져야하는 React의 세가지 핵심 개념으로

  • Components
  • Props
  • State

가 있다.

 

여기까지가 현재 From JavaScript to React에서 5파트 까지 공부한 상태입니다.

다음 시간에는 위의 개념을 살펴보겠습니다.

 

 

'Programming > nextjs' 카테고리의 다른 글

Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(5)  (0) 2022.04.03
Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(4)  (0) 2022.04.02
Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(3)  (0) 2022.04.02
Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(1)  (0) 2022.03.31
Next.js의 기본을 배우자 (1): Next.js는 무엇인가  (0) 2022.03.27

'Programming/nextjs'의 다른글

  • 현재글Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(2)

관련글

댓글

티스토리툴바