실전 리액트 프로그래밍

sykim·2020년 5월 22일

React

회사내부 리액트 스터디

목록 보기

2/3

jsx 문법 없이, cra 도움 없이, 리액트 cdn만을 이용해 리액트 코드 짜보기.

간단한 코딩이었지만 코드량이 많아졌고 이런 작업을 해 봤기 때문에 jsx의 고마움(?)과 jsx를 사용하기 위해 늘 같이 다녔던 바벨의 존재를 조금 더 피부로 깨닫게 되었다.

바벨은 jsx 문법을 사용할 수 있도록 도와주는 컴파일러.
(더 자세히 말하자면 자바스크립트 최신 문법을 브라우저가 읽을 수 있는 구형 문법으로 바꿔주는 컴파일러이다)
웹팩은 수 많은 자바스크립트 파일들을 배포하기 좋은 형태로 묶어주는 툴.
(ESM, commonJS를 지원)

cra를 이용해 빌드해 보기

바벨과 웹팩이 포함
테스트 시스템
핫모듈(개발 코드 수정 시 화면에서 자동 반영)
ES6문법
css 후 처리 등 개발에 용이한 환경을 자동으로 구축시켜준다.

이런 cli 도움 없이 빌드부터 수작업으로 만들어보는 것이 작업물에 대한 이해도 측면에선 의미는 있겠지만 효율적인 면에서 봤을 때 '잘' 이용하는 것도 좋겠다는 생각이 들었다.

cra 명령어 정리

tip!

js, css 파일 외에 이미지 파일이나 폰트 파일의 경우도 src 폴더 밑에서 import를 사용해 포함하는 것이 좋다. 왜냐면 웹팩에서 해시값을 이용해 url을 생성해주기 때문에 파일의 내용이 변경되지 않으면 브라우저 캐싱 효과를 볼 수 있기 때문이다.

다양한 css 작성법

일반적인 .css 파일 작성

클래스별로 겹치는 파일이 있다면 의도한 대로 페이지가 나오지 않는 경우가 생긴다.

(이름).module.css 작성

css를 모듈화 시키는 방법으로 1번의 고충을 해결해준다.
npm i classnames 패키지를 사용해 조금 더 편하게 사용할 수 있다.

sass로 작성

css와 비슷하지만 별도의 문법을 사용하여 생산성을 높여준다. 변수, mixin의 개념을 이용해 스타일 코드의 재사용성을 높일 수 있다.
npm i node-sass 패키지를 설치하면 sass를 css로 빌드해준다

css-in-js

대표적으로 styled-component 패키지가 있다.
scss와 마찬가지로 공통 컴포넌트 재사용이 가능하다.
컴포넌트의 속성값을 매개변수로 갖는 함수를 작성 할 수 있다.

단일 페이지 어플리케이션의 조건

자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다.
단, 브라우저는 서버로 요청을 보내지 않아야 한다.
브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다.
단, 브라우저는 서버로 요청을 보내지 않아야 한다.

pushState, replaceState 함수와 popstate 이벤트만 있으면 클라이언트에서 라우팅 처리가 되는 단일 페이지 어플리케이션을 만들 수 있다.

import React, { useEffect, useState } from 'react';

function App() {
  const [pageName, setPageName] = useState('');

  const onChangePage = (pageName) => {
    setPageName(pageName)
  }
  
  useEffect(() => {
    window.onpopstate = function(event) {
      onChangePage(event.state)
    }
  }, [])

  const onClick1 = () => {
    const pageName = 'page1';
    window.history.pushState(pageName, '', '/page1');
    onChangePage(pageName)
  }

  const onClick2 = () => {
    const pageName = 'page2';
    window.history.pushState(pageName, '', '/page2');
    onChangePage(pageName)
  }

  return (
    <div className="App">
      <button onClick={onClick1}>page1</button>
      <button onClick={onClick2}>page2</button>
      {
        !pageName && <Home />
      }
      {
        pageName === 'page1' && <Page1 />
      }
      {
        pageName === 'page2' && <Page2 />
      }
    </div>
  );
}

function Home() {
  return <>home</>
}
function Page1() {
  return <>page1</>
}
function Page2() {
  return <>page2</>
}

export default App;

react-router-dom 사용하기

브라우저 리스토리 api를 이용해서 페이지 라우팅 처리를 직접 구현할 수도 있지만 보다시피 코드량이 많다.
react-router-dom 패키지를 이용해 간략하게 줄여보자.

import React, { useEffect, useState } from 'react';
import {BrowserRouter, Route, Link} from 'react-router-dom';
function AppRouter() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <Link to="/">home</Link>
          <Link to="/photo">photo</Link>
          <Link to="/rooms">rooms</Link>
        </div>
        <Route path="/" exact component={Home} />
        <Route path="/photo" exact component={Page1} />
        <Route path="/rooms" exact component={Page2} />
      </BrowserRouter>
    </div>
  );
}

function Home() {
  return <>home</>
}
function Page1() {
  return <>page photo</>
}
function Page2() {
  return <>page rooms</>
}

export default AppRouter;