React.js/React.js 완벽 가이드 with TS, Redux, Next.js

섹션 1: 시작하기 - What is react? And Why would we use it? What is SPA?

개발자엄지희 2023. 4. 17. 17:44

1. 강의에 오신 것을 환영합니다!

[Udemy] Best-React, Maximilian Schwarzmüller

원본 강의 내용 (유료)

https://www.udemy.com/course/best-react/learn/lecture/28516611#content

노션 블로그 (색 많고 더 깔끔한 버전)

https://bonjenny.notion.site/56883f5c15654e3d95508de300692c48?v=251da626595e4cfab7947056f98a66ee

React, TS and Redux

A new tool for teams & individuals that blends everyday work apps into one.

bonjenny.notion.site

강의자님 깃허브 주소 - 실습용 소스코드

https://github.com/academind/react-complete-guide-code

GitHub - academind/react-complete-guide-code: Code snapshots and materials for our "React - The Complete Guide" course (https://

Code snapshots and materials for our "React - The Complete Guide" course (https://acad.link/reactjs) - GitHub - academind/react-complete-guide-code: Code snapshots and materials for our &...

github.com

오늘 배우게 될 것

리액트란 무엇인가?
왜 리액트를 사용하는가?
전체적인 개요
어떤 과정들을 수강하는가?
어떤 내용들을 다루는가?

2. React.js는 무엇입니까?

What Is React?

React is a JavaScript library for building user interfaces

위 질문에 대한 답은 공식 홈페이지인 reactjs.org에서 찾을 수 있다.

모바일 앱은 화면 전환이 빠르고 사용성이 좋았지만, 웹 사이트들은 그렇지 않았음

전통적인 웹사이트에서: 링크나 버튼을 누르면 그 요청(request)가 서버에 전송되고 새로운 html 페이지가 브라우저로 보내져 화면에 보여졌음

특징: 무겁고 불편하게 느껴짐 새로운 페이지가 로딩될때까지 대기

자바스크립트는 개발자들이 브라우저에서 어떤 로직을 실행할 수 있게 해줌

사용자들이 보는 것(DOM)을 조작 가능 새롭게 화면을 불러오지 않아도 됨!

결론

React.js는 클라이언트 사이드의 자바스크립트 라이브러리

클라이언트 사이드의 JS코드 작성하는 데 도움을 줌
최신 반응형 사용자 인터페이스 구축 가능

And Why Would We Use It?

왜 자바스크립트에 추가로 리액트가 필요할까?

간단한 예제로 실습해보자

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<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>Just JavaScript</title>
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>
</head>

<body>
  <h1>My Todos</h1>
  <div class="card">
    <h2>Learn React</h2>
    <div class="actions">
      <button class="btn">Delete</button>
    </div>
  </div>
</body>

</html>

/* style.css */
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 3rem;
  background-color: #dfdfdf;
}

h1, h2 {
  color: #333333;
}

.btn {
  font: inherit;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  border-radius: 4px;
  background-color: #800040;
  color: white;
  border: 1px solid #800040;
  margin: 0 1rem;
}

.btn:hover {
  background-color: #9c1458;
  border-color: #9c1458;
}

.btn--alt {
  background-color: transparent;
  color: #800040;
}

.btn--alt:hover {
  background-color: #f8dae9;
}

.card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  width: 20rem;
}

.actions {
  text-align: right;
}

.modal {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-color: white;
  padding: 1rem;
  text-align: center;
  width: 30rem;
  z-index: 10;
  position: fixed;
  top: 20vh;
  left: calc(50% - 15rem);
}

.backdrop {
  position: fixed;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

// app.js
const button = document.querySelector('button');

let modal;
let backdrop;

button.addEventListener('click', showModalHandler);

function showModalHandler() {
  if (modal) {
    return;
  }

  modal = document.createElement('div');
  modal.className = 'modal';

  const modalText = document.createElement('p');
  modalText.textContent = 'Are you sure?';

  const modalCancelAction = document.createElement('button');
  modalCancelAction.textContent = 'Cancel';
  modalCancelAction.className = 'btn btn--alt';
  modalCancelAction.addEventListener('click', closeModalHandler);

  const modalConfirmAction = document.createElement('button');
  modalConfirmAction.textContent = 'Confirm';
  modalConfirmAction.className = 'btn';
  modalConfirmAction.addEventListener('click', closeModalHandler);

  modal.append(modalText);
  modal.append(modalCancelAction);
  modal.append(modalConfirmAction);

  document.body.append(modal);

  backdrop = document.createElement('div');
  backdrop.className = 'backdrop';

  backdrop.addEventListener('click', closeModalHandler);

  document.body.append(backdrop);
}

function closeModalHandler() {
  modal.remove();
  modal = null;

  backdrop.remove();
  backdrop = null;
}

3. 왜 “JavaScript ” 대신 리액트 일까?

자바스크립트의 한계

명령형 접근방식 때문!

자바스크립트로 작성할 때는 모든 단계를 일일히 작성해야 함
Ex) 요소 생성 > 내용 구성 > 클래스 추가 > 클릭 리스너 추가

결론

React.js와의 차이점 (즉, 리액트를 사용하는 이유)

사용자 지정 html 컴포넌트에 사용자 지정 html 요소를 가짐
라이브러리에서 코드를 조합해서 화면에 무언가를 렌더링
최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있게 해줌
고수준의 구문을 제공해 선언형 방식, 선언형 컴포넌트 중심의 방식으로 코드를 작성 가능

// App.js
import Todo from './components/Todo';

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <Todo text='Learn React' />
    </div>
  );
}

export default App;

// Todo.js
import { useState } from 'react';

import Backdrop from './Backdrop';
import Modal from './Modal';

function Todo(props) {
  const [showModal, setShowModal] = useState();

  function showModalHandler() {
    setShowModal(true);
  }

  function closeModalHandler() {
    setShowModal(false);
  }

  return (
    <div className='card'>
      <h2>{props.text}</h2>
      <div className='actions'>
        <button className='btn' onClick={showModalHandler}>
          Delete
        </button>
      </div>
      {showModal && <Backdrop onClick={closeModalHandler} />}
      {showModal && <Modal text='Are you sure?' onClose={closeModalHandler} />}
    </div>
  );
}

export default Todo;

// Modal.js
function Modal(props) {
  return (
    <div className='modal'>
      <p>{props.text}</p>
      <button className='btn btn--alt' onClick={props.onClose}>
        Cancel
      </button>
      <button className='btn' onClick={props.onClose}>
        Confirm
      </button>
    </div>
  );
}

export default Modal;

4. 단일 페이지 어플리케이션(SPA) 구축

SPA(Single Page Applications)

html을 변경하기 위해 서버 사이드와 정보를 주고받지 않고 하나의 웹 페이지 안에서 마치 페이지가 바뀐 것처럼 JS 사용

5. 리액트 대안 탐색하기(Angular/Vue)

리액트란?

가장 인기있는 프론트엔드 프레임워크 또는 라이브러리
컴포넌트 기반의 UI 라이브러리 (컴포넌트 중점!)
내장된 라이브러리 많지 않음! (라우팅 같은 라이브러리 사용 할 때 추가로 설치해야 함!)

앵귤러란?

한번도 영향력이 있거나 인기가 있던 적이 없는 프론트엔드 프레임워크
컴포넌트 기반의 UI 프레임워크 (컴포넌트 중점!) (리액트와 약간 다른 방식으로 컴포넌트를 구축!)
리액트보다 더 많은 내장 기능 (작은 프로젝트에 과함)
타입스크립트 수용

뷰란?

앵귤러와 리액트를 합쳐놓은 것 같음 양 극단 사이에 위치
컴포넌트 기반의 UI 프레임워크
많은 기능들을 포함 (커뮤니티 의존성↓) (앵귤러보단 적고 리액트보단 많지만, 핵심 기능은 포함!)

6. 강의 개요

강의 소개

1) 첫 번째 섹션

리액트에 관한 기본적인 것, 리액트에서 제공하는 핵심 기능

어떤 앱을 만들더라도 필수로 쓰일 기능

2) 두 번째 섹션

리액트의 심화 개념

실제 대다수의 앱에서 아주 많이 쓰일 개념들

3) 세 번째 섹션

특정 개념들에 대한 요약,

강의 목차

가장 핵심적인 사항인 컴포넌트를 구축하는 방법
어떻게 결합하는지
리액트가 취하는 컴포넌트 접근 방식으로 어떻게 사용자 인터페이스를 구축하는지
이벤트와 데이터 다루는 방법
버튼을 클릭했을 때 반응하는 방법
화면의 내용을 바꾸는 방법
props(속성) state(상태)

강의 목표

리액트 앱과 컴포넌트들을 스타일링하는 방법
내가 의도한 대로 사용자 인터페이스를 구축하는 방법
리액트의 핵심 개념인 리액트 훅
리액트의 ContextAPI와 Redux로 앱의 상태를 관리하는 법 (리덕스: 리액트의 서브 파티 라이브러리)
폼에서 사용자 입력을 처리하는 방법
백그라운드에서 http 요청을 전송해서 데이터베이스에 데이터를 저장하거나 불러오는 방법
자신만의 훅을 만드는 법과 훅의 정의
라우팅을 구현하는 방법과 라우팅의 정의
SPA로 사용자에게 여러 페이지인것 같은 착각을 주기
리액트 앱을 배포하는 방법 (Next.js라는 React.js를 기반으로 하는 또다른 프레임워크, 프로덕션 레디 리액트 앱을 훨씬 더 쉽게 구축하도록 해줌)
자바스크립트 리프레시