[React 정복] 1. 리액트 프로젝트 시작하기_(1)

poseassome·2022년 1월 17일

React 정복

목록 보기

1/1

현재 일단 시작해놓은 과정들이 많지만, 제대로 알지 못한다는 불안감에 고민보다는 일단 실천해보기로한다.
그래서 다시 시작해보는 React 정복하기.
실전 리액트 프로그래밍 교재와 함께 진행한다.

그래도 한 번씩은 접해봤던 React 내용이 나와서 이해하기에는 좀 수월한 것 같다.

1.1 리액트란 무엇인가

리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리이다.
UI 기능만 제공하기 때문에 전역 상태 관리, 라우팅, 빌드 시스템 등을 개발자가 구축해야 한다.
create-react-app을 사용하면 쉽게 리액트 개발 환경을 구축할 수 있다.

리액트를 사용하는 이유

프론트엔드 라이브러리를 사용하는 이유는 UI를 자동으로 업데이트 해주기 때문이다.

UI = render(state)

API통신이나 사용자 이벤트를 통해 프로그랢의 상태값을 변경하면 React가 변경된 상태값을 기반으로 UI를 자동 업데이트 한다.

React 장점
=> 가상 돔(virtual Dom)을 통해 UI 빠르게 업데이트
가상 돔(virtual Dom): 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술

=> 함수형 프로그래밍 적극 활용 (순수 함수와 불변 변수)
(render()는 순수함수여야 하므로 인수 state가 변하지 않으면 항상 같은 값을 반환해야한다.)
(component 상태값을 수정할 때는 기존값을 변경하는게 아닌 새로운 객체를 생성해야한다.)

1.2 리액트 개발 환경 직접 구축하기

1.2.1 Hello World 페이지 만들기

react javascript 파일 CDN 방식

<!-- 1️⃣ -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- 2️⃣ -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<!-- 3️⃣ -->
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 4️⃣ -->
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

development : 개발 환경에서 사용되는 파일
production : 배포 환경에서 사용되는 파일

1, 2번은 플랫폼 구분없이 공통으로 사용되는 리액트의 핵심기능을 담고 있으며, 3, 4번은 웹에서만 사용되는 파일이다.

# 간단한 웹 애플리케이션 만들기

📑 HTML

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>

<body>
  <h2>프로젝트가 마음에 들면 좋아요 버튼을 눌러주세요.</h2>
  <!-- react로 렌더링할 때 사용할 돔 요소 -->
  <div id="react-root"></div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="simple1.js"></script>
</body>

</html>

📑 JS

function LikeButton() {
  /* componenet의 초기값, 상태값 정의 */
  const [liked, setLiked] = React.useState(false);
  /* component 상태에 따른 버튼 문구 */
  const text = liked ? '좋아요 취소' : '좋아요';

  /* createElement() : 리액트 요소 반환 */
  return React.createElement(
    'button',
    { onClick: () => setLiked(!liked) }, /* 클릭하면 component 상태값 변경 */
    text,
  );
}

const domContainer = document.querySelector('#react-root');
/* development.js 파일에서 전역 변수로 만든 ReactDOM 변수를 사용해서
  만든 component를 react-root 돔 요소에 붙인다. */
ReactDOM.render(React.createElement(LikeButton), domContainer);

react-simple1

초기 liked의 상태는 false여서 버튼이 '좋아요'이고,
버튼을 누르면 liked의 상태가 true가 되기 때문에 '좋아요 취소'가 된다.

대부분 createElement를 직접 작성하지 않고 바벨(Babel)을 사용하여 JSX 문법을 사용한다.

# 여러 개의 돔 요소에 렌더링하기

📑 HTML
3개의 <div>요소에 LikeButton component 렌더링한다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>

<body>
  <h2>프로젝트가 마음에 들면 좋아요 버튼을 눌러주세요.</h2>
  <!-- react로 렌더링할 때 사용할 돔 요소 -->
  <div id="react-root1"></div>
  <p>
    ...
  </p>
  <div id="react-root2"></div>
  <p>
    ...
  </p>
  <div id="react-root3"></div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="simple2.js"></script>
</body>

</html>