- 리액트
우선 리액트가 무엇인지 간단히 짚고 넘어가자면,
리액트는 페이스북에서 만든 UI 개발을 위한 자바스크립트 라이브러리다. 웹이 발전하면서 싱글 페이지 어플리케이션에 대한 수요가 증가했고, 리액트를 사용하면 효율적인 싱글 페이지 어플리케이션을 개발할 수 있다.
프론트엔드에서 가장 유명한 세가지 라이브라리를 비교해 봤을 때, 리액트의 다운로드 수가 압도적으로 많은 것을 알 수 있다. 나도 그래서 자연스럽게 리액트를 시작한 것 같다.
리액트는 api통신이나 클릭과 같은 이벤트로 상탯값이 변경되었을 때, 변경된 값을 자동으로 UI에 업데이트(렌더링) 해준다. 이때, 효과적인 렌더링을 위해서 리액트는 가상돔(Virtual Dom)을 사용한다. 가상돔은 이전의 돔을 메모리에 유지해서, 변경될 UI의 최소 부분만 계산해준뒤 효율적으로 UI를 업데이트 해준다. 가상돔의 자세한 내용은 추후에 알아보자.
- 리액트 시작하기
우리가 웹페이지를 만들 때, html 파일의 body 태그 하단에 script 태그로 자바스크립트 파일을 불러온다. 마찬가지로 리액트 개발에 필요한 파일도 불러올 수 있다. unpkg사이트를 이용하면 npm으로 다운받지 않고 필요한 파일을 불러올 수 있다. unpkg에서 불러온 react 17.0.2를 이용해 간단한 웹페이지를 만들어보자.
UNPKG
UNPKGunpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:unpkg.com/:package@:version/:file Examples Using a fixed version: You may also use a semver range or a
unpkg.com
- like-button.html
html 파일에는 필요한 리액트 파일과 작성한 자바스크립트 파일을 불러왔다. 세가지 div안에 리액트로 돔을 추가할 것이다.
<html>
<body>
<h1>Simple Project. Hello, World!</h1>
<h3>Button1</h3>
<div id="react-root1"></div>
<h3>Button2</h3>
<div id="react-root2"></div>
<h3>Button3</h3>
<div id="react-root3"></div>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="like-button.js"></script>
</body>
</html>
- like-button.js
const LikeButton = () => {
const [liked, setLiked] = React.useState(false)
const text = liked ? 'Cancle Like' : 'Like!'
return React.createElement(
'button',
{ onClick: () => setLiked(!liked) },
text,
)
}
ReactDOM.render(React.createElement(LikeButton), document.querySelector('#react-root1'))
ReactDOM.render(React.createElement(LikeButton), document.querySelector('#react-root2'))
ReactDOM.render(React.createElement(LikeButton), document.querySelector('#react-root3'))
우리는 html파일에서 like-button.js앞에 리액트 파일을 불러왔기 때문에 해당 파일에서 전역변수로 선언된 React와 ReactDOM을 이 자바스크립트 파일이서도 사용할 수 있다.
먼저 LikeButton이라는 함수형 컴포넌트를 정의했다. 해당 컴포넌트 안에는 React의 useState로 'liked' 라는 상탯값이 정의되어 있으며, 이 상탯값은 setLiked 에 의해 갱신된다. 이 함수형 컴포넌트는 createElement로 리액트 요소를 반환한다. createElement 함수의 첫번째 파라미터는 만들어질 돔 요소이고 두번째는 props, 세번째 이후는 이 리액트 요소가 감싸고 있는 내부 컴포넌트들이다.
그리고 ReactDOM.render함수로 우리가 만든 리액트 컴포넌트를 html의 div태그 안에 생성시킨다. 위에선 하나의 컴포넌트를 세개의 돔요소에 렌더링했다. 이처럼 리액트 컴포넌트는 재사용이 가능하다. 이건 리액트의 큰 장점 중 하나이다.
해당 html파일을 브라우저에서 열어봤다. 리액트로 만든 버튼을 클릭할 때 마다, 버튼의 텍스트가 변화함을 알 수 있다. 이렇게 리액트는 상탯값이 변하면 자동으로 렌더링 해준다.
- 웹팩(Webpack)
웹팩은 프로그램을 배포하기 좋은 형태로 묶어주는 도구이다. 위에서 언급한대로 싱글 페이지 어플리케이션에 대한 수요가 증가하면서 하나의 웹페이지에도 수십개의 자바스크립트 파일이 필요해졌다. 파일들의 의존성 때문에 많은 자바스크립트 파일을 관리하기 힘들어졌고, 웹팩은 이를 해결해준다. 웹팩은 ES6의 모듈시스템을 지원하기 때문에 자바스크립트를 모듈화할 수도 있다. 자바스크립트 파일들을 src 폴더 안에서 모듈시스템을 이용하여 작성한뒤 하나의 파일로 합치자.
터미널에서 npm으로 필요한 웹팩과 리액트를 설치하고 웹팩을 실행할 수 있다.
// npm으로 react와 webpack 설치
$ npm install webpack webpack-cli react react-dom
// webpack으로 src안의 자바스크립트 파일들 합치기
$ npx webpack
합쳐진 dist/main.js 파일은 불필요한 주석과 공백을 없앤 모습이다. 이 단 하나의 파일만 index.html에서 불러오면 된다.
- 바벨(Babel)과 JSX
바벨은 자바스크립트 코드를 변환해 주는 컴파일러다. 바벨은 자바스크립트의 최신 문법을 몇몇 낡은 브라우저가 읽을 수 있도록 예전 문법으로 변환해줄 수도 있고, JSX 문법을 표준 자바스크립트 문법으로 변환시켜주는 등 다양한 기능을 한다. 리액트를 사용할 때 위처럼 createElement로 리액트 돔 요소를 만들 수도 있지만, 주로 가독성을 위해 JSX 문법을 사용한다. 위의 함수형 컴포넌트 LIkeButton을 JSX 문법으로 작성하면 아래와 같다. html과 유사해서 훨씬 가독성이 좋다.
// No JSX
const LikeButton = () => {
const [liked, setLiked] = React.useState(false)
const text = liked ? 'Cancle Like' : 'Like!'
return React.createElement(
'button',
{ onClick: () => setLiked(!liked) },
text,
)
}
// JSX
const LikeButton = () => {
const [liked, setLiked] = React.useState(false)
const text = liked ? 'Cancle Like' : 'Like!'
return (
<button onClick={() => setLiked(!liked)}>
{text}
</button>
)
}
'프론트엔드 > 실전 리액트 프로그래밍' 카테고리의 다른 글
| [스터디 with 실전 리액트 프로그래밍] 5편 - const, let, var (0) | 2022.08.05 |
|---|---|
| [스터디 with 실전 리액트 프로그래밍] 4편 - 단일 페이지 어플리케이션 (0) | 2022.08.04 |
| [스터디 with 실전 리액트 프로그래밍] 3편 - 다이나믹하게 import (0) | 2022.05.16 |
| [스터디 with 실전 리액트 프로그래밍] 2편 - create-react-app (0) | 2022.05.16 |
| [스터디 with 실전 리액트 프로그래밍] 0편 - 시작하며 (0) | 2022.05.05 |