리액트 시작하기 – 리액트 튜토리얼 2

리액트 시작하기

리액트를 시작하기 가장 좋은 방법은 리액트 공식 웹사이트를 참고해서 시작하는 것 입니다. 기술 문서의 번역이 그렇듯이 약간 어색하긴 하지만 한글 번역도 되어 있기 때문에 참고하기에 나쁘지 않습니다.

리액트를 시작하는 방법은 여러가지가 있는데 codepen 등의 온라인 컴파일러에서 react와 react-dom을 추가한 후 Babel 전처리기를 넣고 쓸 수 있고, 혹은 리액트 웹사이트에서 제공하는 CDN 파일을 html 파일에 링크를 걸고 사용할 수도 있습니다. 이런 방식은 학습이나 데모 사이트의 제작에는 괜찮지만 실제 개발하기 위해서는 개발 환경을 세팅하는게 좋습니다.

개발환경 설치

리액트 개발환경도 크로스 플랫폼입니다. 윈도우, 리눅스, 맥OS 모두 가능합니다. 여기서는 윈도우 환경을 알아봅니다.

개발환경 세팅은 개인이 구성하기 나름이지만 효율적인 개발을 위한 최소한의 툴은 있습니다. IDE에서 가장 많은 시간을 보내기 때문에 IDE가 중요한데 꼭 비주얼 스튜디오 코드가 아니라도 상관은 없습니다. 다만 많은 사람들이 사용하고 커뮤니티가 커지면 그에 따른 이점이 많기 때문에 보통 권장합니다.

  1. 코드 에디터(IDE) – 비주얼 스튜디오 코드 권장
  2. Nodejs – npm 패키지 관리자
  3. 크롬 확장 프로그램 – react developement tool

비주얼 스튜디오 코드는 MS공식 웹사이트에서 다운로드 후에 설치합니다. 확장 프로그램으로는 ES7+React/Redux/React-Native snippets 를 설치하는 것을 추천합니다.

Nodejs의 경우 최근에 릴리즈한 LTS버전을 설치하면 됩니다.

크롬 확장 프로그램에서는 React Developer Tools 를 설치하면 리액트 Component 구조를 보여줍니다. 리액트로 웹사이트를 개발하거나 혹은 다른 리액트 웹사이트를 분석할 때 필요한 툴입니다.

설치 테스트

npm의 npx 명령어로 리액트를 잘 설치했는지 테스트 해보겠습니다. my-react라는 폴더에 기본 패키지와 템플릿 파일을 설치합니다. npx 명령어를 입력하면 알아서

npx create-react-app my-react
cd my-react
npm start

웹브라우저가 실행되며 아래와 같은 페이지가 나오면 잘 설치된 것 입니다.

리액트

폴더 구조를 보면 많은 것들이 설치되어 있습니다. package.json에는 각종 의존성이 설치되는데 react, react-dom 의 버전을 확인할 수 있습니다.

public 폴더의 index.html에서 주석을 지우고 나면 아래와 같습니다. body에 보면 id가 root인 div 요소가 있습니다. 이게 SPA(Single Page Application)입니다. 앞으로 만들 모든 컴포넌트가 이 안에 들어간다고 보면 됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src 에는 여러 파일들이 생성되어 있습니다. 이것들은 템플릿이고 이제부터 컴포넌트를 하나씩 만들어서 추가해야 합니다. App.js의 내용을 수정해서 전통의 Hello World를 찍는 것으로 리액트 코딩을 시작해보겠습니다.

App.js의 내용을 다 지우고 아래와 같이 입력합니다. 위에서 ES7 확장 스니펫을 설치했다면 rfc와 TAB을 입력하면 함수의 형태가 나올 겁니다. return ( ) 안에 있는 JSX를 수정합니다. JSX는 HTML과 비슷하게 생겼지만 Babel이 컴파일 하는 자바스크립트 코드입니다. 하지만 HTML과 상당히 유사해서 HTML을 알고 있다면 어렵지 않게 적응할 수 있습니다.

export default function App() {
  return (
    <h1>Hello from React!</h1>
    )
}

Hello from React!

브라우저의 내용이 변했다면 리액트가 작동하는 것 입니다. 크롬 브라우저에서 마우스 우클릭의 검사를 클릭하면 개발자 도구가 나오는데 위에서 리액트 크롬 확장 프로그램을 설치했다면 Components 가 나올 겁니다. Component 를 클릭해 보면 App 이라는 컴포넌트가 있습니다. 아직 하나밖에 없지만 앞으로 웹사이트를 개발하며 추가하는 컴포넌트들이 여기에 표시될 것 입니다.

요약

리액트 개발환경을 설치하고 npx 명령어로 템플릿을 만든 후 Hello World를 출력해봤습니다. 다음 포스팅에서는 리액트의 핵심인 컴포넌트와 기초 문법에 대해서 알아보겠습니다.

Leave a Comment