Chapter 1. React Intro

학습 목표

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

React

---

• 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리
• React의 세 가지 특징
  • 선언형(Declaritive)
    • 선언형(명시적)이라는 뜻은 코드를 자세히 분석하지 않고도 코드의 의도를 알 수 있는 형식
    • 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향
  • 컴포넌트 기반(Component-Based)
    • 컴포넌트는 하나의 기능을 위해 여러 종류의 코드를 묶어 놓은 것
    • 서로 독립적이고 재사용 가능, 기능 자체에 집중하여 개발할 수 있음, 유지보수가 편함
  • 범용성(Learn Once, Write Anywhere)
    - JavaScript 프로젝트 어디에든 유연하게 적용
    - React native로 모바일 개발도 가능
    
    

1-1. JSX

---

• JavaScript XML

• React에서 UI를 구성할 때 사용하는 JavaScript를 확장한 문법

• 브라우저가 바로 실행할 수 있는 코드가 아니기 때문에 'Babel'을 사용해 JavaScript로 컴파일

• JSX를 사용하면 JavaScript만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 됨

• HTML처럼 생겼지만, HTML이 아님(❗️)

• 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 함

JSX 규칙

• 여러 element를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 함
• CSS class 속성 지정
  • className으로 표기
• JavaScript 사용
  • 반드시 중괄호 이용(사용하지 않으면 텍스트로 인식)
• React Element 사용
  • 대문자로 시작(소문자일 경우 HTML Element로 인식)
  • 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부름
• 조건부 렌더링
  • if문이 아닌 삼항연산자 사용
• 여러 개의 element를 표시할 때
  • map() 사용
  • map 함수 사용 시, 반드시 "key" JSX 속성을 넣어야 함

1-2. map을 이용한 반복

---

map

• map()은 배열을 순회하면서 각 요소를 변환하고, 변환된 요소로 새로운 배열을 생성하는 메서드

• React 컴포넌트에서 동적으로 리스트를 생성하거나, 배열의 각 요소를 가공하여 렌더링하는 데 자주 사용

• 기본 구문

arr.map(callback(currentValue, index, array), thisArg)

// arr: 배열로 map() 함수를 호출하는 배열
// callback: 배열의 각 요소에 대해 실행되는 함수로, 각 요소를 변환하고 새로운 값을 반환
// callback은 다음 매개변수를 가질 수 있다:
// currentValue: 현재 순회 중인 요소의 값
// index (선택사항): 현재 순회 중인 요소의 인덱스
// array (선택사항): map()을 호출한 배열
// thisArg (선택사항): callback 함수 내에서 사용될 this 값

// React 예시
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const UserList = () => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};
// users 배열을 순회하면서 각 사용자에 대해 `<li>` 요소를 생성
// key prop은 고유한 식별자를 제공하여 React가 리스트 항목을 효율적으로 관리할 수 있도록 함

• return 문 안에서 map 메서드를 사용할 수 있음
  • JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메서드의 결과를 return문 안에 인라인으로 처리할 수 있음
  • 코드 가독성을 위해 변수로 추출할지 아니면 인라인에 넣을지는 개발자가 판단해야 할 몫

key 속성

• React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움

• key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣음(안정적인 고유성 부여)

• key 속성값은 가능하면 데이터에서 제공하는 id를 할당

  • id가 존재하지 않으면 배열 인덱스를 넣어서 해결
  • 배열 인덱스는 최후의 수단(as a last resort)으로만 사용
  • 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것을 권장하지 않음

• React Key

  • 공식 문서 구 / 신

1-3. Component

---

• 하나의 기능을 구현하기 위한 여러 종류의 코드 묶음

• UI를 구성하는 필수 요소

• 각자 독립적인 기능을 가지고 있는데, 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있음

• 모든 React는 최소 한 개의 컴포넌트를 가지고 있음

  • 근원(root)이 되는 최상위 컴포넌트가 있음
  • 계층적 구조를 트리 구조로 형상화 할 수 있음
  
  

Chapter 2. Create React App

학습 목표

• Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다.
• npx create-react-app으로 새로운 리액트 프로젝트를 시작할 수 있다.
• create-react-app으로 간단한 개발용 React 앱을 실행할 수 있다.
• 리액트 랜덤 명언 앱 튜토리얼을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다.
• Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다.

• React SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인

• 초기 프로젝트 설정 및 구성, 개발 서버 제공, 빌드 스크립트 설정 등을 자동화하여 빠르게 시작할 수 있도록 지원

• 장점

  • 쉬운 프로젝트 설정
    • React 프로젝트를 위한 초기 설정을 자동으로 처리
    • 설정 파일을 작성하거나 구성을 직접 변경할 필요 없이 바로 개발에 집중 가능
  • 개발 서버 제공
    • 개발 과정에서 변경 사항을 실시간으로 반영할 수 있는 개발 서버를 제공
    • 수정 사항을 저장하면 자동으로 페이지가 다시 로드되어 변경 사항을 확인
  • 자동 빌드 스크립트
    • 코드의 압축, 번들링, 최적화 등을 자동으로 처리하여 성능을 향상시키고 용량을 최소화
  • Hot Module Replacement (HMR) 지원
    • 코드 변경 시 전체 페이지를 새로고침하지 않고도 수정 사항을 빠르게 반영
  • 배포 준비
    • 배포를 위한 최적화된 빌드 파일을 생성
    • 이 파일들은 최신 웹 개발의 모범 사례에 따라 압축되고 최적화되어 성능을 향상시킴
    • 배포 과정에서 자동으로 캐싱 및 파일명 해싱을 처리하여 캐시 무효화 문제를 해결

✔️)
* 캐싱 : 이전에 요청된 데이터나 리소스를 저장하여 동일한 요청이 발생했을 때, 서버에 다시 요청하는 대신 저장된 데이터를 사용하는 것
* 파일명 해싱 : 정적 파일의 이름을 변경하는 기술, 해싱 알고리즘을 사용하여 파일의 내용을 기반으로 고유한 해시값을 생성하고, 이 해시값을 파일 이름에 포함시킨다.
파일의 내용이 변경될 때마다 새로운 파일명이 생성되므로 브라우저가 이전에 캐시한 파일과 구분 가능
* 캐시 무효화 : 브라우저나 서버에 저장된 캐시를 강제로 제거하여 새로운 리소스를 가져와야 함을 알리는 것

npx create-react-app@latest 폴더이름

• 명령을 실행하면 "폴더이름"이라는 이름의 새로운 React 프로젝트가 생성
• 생성된 프로젝트 폴더로 이동한 후, npm start (또는 yarn start) 명령을 실행하면 개발 서버가 시작되고 기본 웹 페이지가 표시됨