Study Web Development

4월 1일

이전으로

React

https://ko.reactjs.org/

특징

Virtual DOM

• 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 JavaScript 객체를 구성하여 사용
• 실제 DOM의 가벼운 사본과 비슷

Virtual DOM의 작동 방식

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용

설치 및 개발 환경

Node.js, npm, Yarn

https://nodejs.org/ko/download/

1. LTS Windows Installer 다운로드하여 설치
2. cmd를 열어 Node.js와 npm의 설치 버전을 확인

node -v
npm --version

3. npm으로 Yarn 설치하고 Yarn 버전 확인

npm install --global yarn
yarn --version

Visual Studio Code

https://code.visualstudio.com/download

1. Windows User Installer 64 bit 다운로드하여 설치
2. VSC를 실행 후 우측 하단 알림에 따라 언어 팩 설치하고 재시작

확장 프로그램

• ESLint
  • JavaScript 문법 및 코드 스타일 검사
• Reactjs Code Snippets
  • React 컴포넌트 및 라이프사이클 함수 템플릿을 자동 완성하는 단축어 모음
• Prettier - Code formatter
  • 코드 스타일 정리
  • 파일-기본 설정-설정에서 Format On Save 선택

Git

• Windows

git update-git-for-windows

• Ubuntu

sudo add-apt-repository ppa:git-core/ppa
sudo apt update; sudo apt install git

JSX

리액트 객체 생성 및 호출

1. C:/javaWork에 새 폴더 workspace_react 생성하고, 리액트 앱 ch01-jsx 생성

cd C:/javaWork/workspace_react
yarn create react-app ch01-jsx
dir /w # 하위 디렉토리만 보여짐

2. 리액트 앱 경로로 이동 후 리액트 개발 서버(http://localhost:3000/)를 구동

cd ch01-jsx
yarn start

3. cmd에서 ctrl+c 누르면 서버가 종료됨
4. VSC에서 폴더 열기-ch01-jsx 선택하고 App.js를 다음처럼 수정

// 리액트 객체를 불러와서 사용.
// 리액트 앱을 만들 때 node_modules라는 디렉토리도 함께 생성되며, 해당 디렉토리에 react 모듈이 설치됨
import React, {Fragment} from 'react';

// App이라는 컴포넌트를 만들어 줌
// 함수형 컴포넌트
// 함수에서 반환하는 내용이 HTML처럼 보이지만, JSX로 작성된 것
// 이런 형식으로 작성된 코드는 브라우저에서 실행되기 위해 최종적으로 JavaScript 형태의 코드로 변환됨
function App() {
  const name = 'React'; // 변경이 없으면 const를 기본적으로 사용
  return( // 복수의 태그를 반환하는 경우에는 소괄호 필수
  /*
  <div>
    <h1>Hello {name}!</h1>
    <h2>잘 동작하나요?</h2>
  </div>
  */
  /*
  <Fragment>
    <h1>{name} 안녕!</h1>
    <h2>Fragment로 감싸기</h2>
  </Fragment>
  */
  <>
    <h1>{name} 안녕,</h1>
    <h2>빈 태그로 감싸기</h2>
  </>
  );
}

export default App;

다음으로