🕵️‍♀️React 리액트란?

메타에서 개발한 오픈 소스 자바스크립트 라이브러리.
프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수는 Vue가 가장 많으며(2022년 12월 04일 기준 Vue는 201K, React는 199K, Angular는 59.4K), npm 패키지 다운로드 수는 React가 가장 많다.
SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다. 이와 더불어 타입스크립트나 Sass 같은 언어도 지원한다. 또한 Next.js 등의 등장으로 인해 SSG, SSR등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.

Virtual DOM

서버와의 데이터 통신과는 별개로 DOM을 직접적으로 조작해야하는 기존의 웹 화면 개발 방식과 달리, React는 DOM을 직접적으로 조작하지 않고 데이터가 변화할 때 변경사항이 적용된 Virtual DOM을 만든다. 그 다음 실제 DOM과 Virtual DOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다.

보여지는 데이터의 잦은 변경이 필요한 웹앱의 경우 이러한 방식을 통해 성능을 크게 향상시킬 수 있다. 실제 동적인 웹일수록 Angular 등과 비교해서 성능이 훨씬 더 빠른 편이다. 단, 데이터가 자주 변경되지 않는 비교적 정적인 웹 페이지에 이를 적용할 경우 오히려 성능면에서 손해를 볼 수 있다.

JSX (JavaScript eXtension)

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.

HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다 Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.

HTML요소에 class값을 정의할 때, 원래 HTML에서는 <p class="container"></p>
과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다.

마찬가지 이유로 루프문 예약어와 겹치는 forhtmlFor로 사용한다.
또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기해야 한다.

기존의 HTML에서 주석은 <!-- COMMENT -->이렇게 했었지만 JSX에서는 {/*주석*/} 으로 표현한다.
HTML Custom-Element<my-element>와 같이 표기했지만 ReactCustom Element<MyElement />와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다.
JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식이다.

JSX 위주의 프론트엔드 라이브러리로는 Preact, SolidJS, Inferno 등이 있으며, Vue.js 등의 자체적인 포멧을 사용하거나 Svelte 같이 JSX 사용과 거리가 먼 라이브러리 및 프레임워크 또한 JSX를 사용할 수 있는 방법이 존재한다.

어도비의 Photoshop, After Effects등의 프로그램에서 쓰이는 스크립트의 확장자명도 jsx이지만 이 jsx와는 자바스크립트라는 것 이외의 관련이 없다.

JSX 코드를 자바스크립트로 변환하기 (Babel)

JSX 코드는 자바스크립트가 확장된 형태로 엄밀한 얘기해서 브라우저가 바로 실행할 수 있는 자바스크립트 코드가 아니다. 이렇게 JSX와 같이 자바스크립트의 표준에서 벗어난 코드는 소위 트랜스파일(transpile)이라는 과정을 거쳐서 브라우저가 이해할 수 있는 순수한 자바스크립트 코드로 변환을 해줘야한다.
Babel 패키지를 불러오는 <script> 태그를 추가하고, <script type="module"> 부분을 <script type="text/babel">로 바꿔준다.

[출처] https://www.daleseo.com/react-jsx/

개발환경

개발환경 구축은 npxyarn 중에서 선택하면 된다.

  • npm 설치

Node.js를 설치해서 npm이 함께 설치되게 한 다음에 프로젝트를 만들 폴더의 터미널에서
npx create-react-app .
을 입력한다.(점까지 모두 입력되어야 한다.)

만일 다른 이름으로 프로젝트를 만들고자 한다면
npx create-react-app [Project name]
을 입력한다.

참고로 npx를 이용한 설치는 npm -g 처럼 노드 환경을 사용하는 pc 자체에 깔리는 것이 아니고 node module이 설치된 프로젝트 내부에만 설치되는 것도 아니다. create-react-app은 처음 프로젝트를 생성할 때만 필요하고 그 이후에는 있을 필요가 없기 때문에 npx를 사용해 1회성으로 설치 후 자동 삭제된다. npm 5버전 이상부터는 npx가 자동으로 지원된다. 그렇지 못한 경우에는 다음과 같이 npx를 설치할 수 있다.
npm install npx -g

참고로 자바스크립트가 아닌 타입스크립트를 사용하려면
npx create-react-app . --template typescript
를 입력하면 된다.

  • 실행
    npm start
    를 터미널에서 입력하면 리액트가 실행된다. 실행을 종료하고 싶다면 Ctrl+C를 터미널에서 누르면 된다.
    실행되면 리액트 폴더의 src/app.js 파일을 통해 페이지 수정을 하고, 자동으로 실행되는 웹브라우저에서 확인이 가능하다.

  • 빌드
    npm run build
    를 입력하면 리액트 폴더의 내용물이 압축되어 웹상에 올리기 적합한 형태로 build 폴더 안에 생성 된다.
    serve -s build
    를 입력한다면 build 폴더의 내용물을 볼 수 있는 서버가 생성된다. 중지는 Ctrl+C를 통해 할 수 있다.

  • yarn 설치

Node.js를 설치해서 npm이 함께 설치되게 한 다음에 프로젝트를 만들 폴더의 터미널에서
npm i -g yarn을 입력한다. (Yarn 설치)
yarn create react-app .을 입력한다. (점까지 모두 입력되어야 한다.)

만일 다른 이름으로 프로젝트를 만들고자 한다면
yarn create react-app [Project name]을 입력한다.

참고로 yarn를 이용한 설치는 npm -g 처럼 노드 환경을 사용하는 pc 자체에 깔리는 것이 아니고 node module이 설치된 프로젝트 내부에만 설치되는 것도 아니다. create-react-app은 처음 프로젝트를 생성할 때만 필요하고 그 이후에는 있을 필요가 없기 때문에 yarn를 사용해 1회성으로 설치 후 자동 삭제된다.

참고로 자바스크립트가 아닌 타입스크립트를 사용하려면
yarn create react-app . --template typescript
를 입력하면 된다.

  • 실행
    yarn start
    를 터미널에서 입력하면 리액트가 실행된다. 실행을 종료하고 싶다면 Ctrl+C를 터미널에서 누르면 된다.
    실행되면 리액트 폴더의 src/app.js 파일을 통해 페이지 수정을 하고, 자동으로 실행되는 웹브라우저에서 확인이 가능하다.

  • 빌드
    yarn build
    를 입력하면 리액트 폴더의 내용물이 압축되어 웹상에 올리기 적합한 형태로 build 폴더 안에 생성 된다.
    serve -s build
    를 입력한다면 build 폴더의 내용물을 볼 수 있는 서버가 생성된다. 중지는 Ctrl+C를 통해 할 수 있다.

기본적인 리액트 문법

함수형 문법 (권장)

import ReactDOM from 'react-dom';

function App ({name}){
  return (
    <h1>Hello, {name}!</h1>
  )
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

클래스형 문법 (비권장)

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    )
  }
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

설치 및 사용

  1. 구글 리액트 , React 검색 및 [URL] : https://ko.reactjs.org/ 에 들어가서 '시작하기' 를 클릭

  1. 스크롤을 내리다 보면 '웹사이트에 React를 추가하기' 밑에 '1분 안에 HTML 페이지에 React를 추가할 수 있습니다.' 를 클릭

  1. '2단계 : 스크립트 태그 추가하기' 항목에서 <script> 를 복사하여 index.html에 넣는다.

🕵️‍리액트를 CDN 방식으로 넣어도 되고 직접 src에 있는 링크를 직접 들어가서
react.development.jsreact-dom.development.js를 다른이름으로 저장하여
js파일로 직접 링크를 걸수도 있다.

  1. 위에 설명한 JSX 코드를 변환하기 위해 바벨 (Babel)이 필요하다. 'JSX 빠르게 시도해보기'에 있는 CDN을 복사 하거나 링크에 들어가 다운로드하여 파일로 링크를 거는방법을 사용한다.

Visual Studio Code (VScode) 확장프로그램

1. React Extension Pack

  • Reactjs 코드 스니펫 - ES6에서 React 개발을 위한 코드 스니펫을 추가

  • ES Lint - ESLint를 VS Code에 통합.

  • JavaScript(ES6) 스니펫 - ES6 구문에서 JavaScript 개발을 위한 코드 스니펫을 추가

  • node_modules 검색 - 프로젝트에서 노드 모듈을 빠르게 검색

  • NPM IntelliSense - 코드에 npm 모듈용 IntelliSense를 추가

  • 경로 IntelliSense - 코드에서 파일 이름을 자동 완성합니다.


2. Prettier - code formatter

  • Prettier는 ‘Beautify’ 라는 확장기능과 양대산맥으로 불리는 Formatter 기능

  • Formatter란, 제가 작성한 코드에 대해 설정된 규칙에 의해 정렬을 해주는 기능

  • VS Code에도 내장된 Formatter가 있지만, 이미 알고 있듯이 내장기능이 만족스럽지 않기 때문에 확장 플러그인이 개발이 됨


3. React Code Snippets

  • 컴포넌트를 단축어로도 생성되는 확장프로그램 ex ) 함수형 컴포넌트 , 클래스형 컴포넌트 등

    🧙‍♀️ 사용예시 : RCC + tab


크롬 (chrome) 확장프로그램

크롬브라우저에서 설정 > 확장프로그램 > 메뉴 > 'Chrome 웹스토어 열기' > 'React Developer Tools' 를 검색 후 다운로드

1. React Developer Tools (디버깅 툴)

React Developer Tools 를 다운로드 하면 크롬 개발자모드에서 Component를 볼 수 있다.


🕵️‍♀️중요한 Tip

  1. <script>의 타입은 type="text/babel" 필수
  2. JSX 문법은 <> </> 열리고 닫히고가 중요하다. 기존 HTML에서 사용된 단일태그 예시: <img> , <a> , <br><img/> , <a/> , <br/> 로 닫아주어야한다.
  3. 기존 HTML에서는 Class<div class='클래스'></div>였지만 JSX문법에서의 클래스는 className이다 <div className='클래스'></div>로 작성한다.

0개의 댓글