Unit4 - [React] Intro

🔥 React Intro

React : 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리

• 오픈소스 : 소스가 공개되어 있음(저작권자가 공개), 누구나 자유롭게 사용, 복제, 배포, 수정 가능한 소프트웨어
• 라이브러리 : 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합

- React 3가지 특징 : 선언형, 컴포넌트 기반, 범용성

• 선언형 (Declarative)
  : 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍
  => 무엇에 집중하여 프로그래밍을 하는 것

• 컴포넌트 기반 (Component-Based)
  : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
  => 독립성, 재사용성 ↑ => 기능 작동(유지 보수, 유닛 테스트)에 집중하여 개발 가능

• 범용성 (Learn Once, Write Anywhere)
  : JavaScript 프로젝트 어디에든 유연하게 적용 가능 (리액트 네이티브로 앱 개발 가능)

1. JSX (JavaScript XML)

: JavaScript를 확장한 문법 (HTML + JavaScript = JSX) & 복잡성↓ 가독성↑

• JSX는 "Babel"을 이용해 브라우저가 이해할 수 있는 JavaScript로 컴파일 한다.
• React에서는 DOM과 다르게 CSS, JSX 문법만 가지고 웹 애플리케이션 개발이 가능하다.
• JSX를 사용하면 JavaScript만으로 마크업(markup)형태의 코드를 작성하여 DOM에 배치할 수 있고, Javascript, HTML 문법의 기능과 구조를 한눈에 확인할 수 있다.

import React from "react";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity",
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  
   // JSX없이 활용한 React
  // return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

하나의 파일에서 HTML과 JavaScript로 나누어졌던 두 가지 일을 한 번에 처리 한다.
=> JSX는 개발자가 코드만 바라보는게 아니라 구조를 바라보게 돕는다.

- 주요 JSX 문법

1) 하나의 엘리먼트 안에 모든 엘리먼트가 포함된다.

(최상위에서 opening tag와 closing tag로 감싸줘야 한다.)

<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h1>World</h1>
  </div>
</div>

2) 엘리먼트 클래스 사용 시, className 으로 표기한다.

(class로 작성하게 되면 JavaScript 클래스로 받아들인다.)

<div className="greeting">Hi!</div>

3) JavaScript 표현식 사용 시, 중괄호{}를 사용한다.

(중괄호를 사용하지 않으면 일반 텍스트로 인식한다.)

function App() {
  const name = "yejin";

  return <div>Hi {name}</div>;
}

4) 사용자 정의 컴포넌트는 대문자로 시작 (PascalCase) = 사용자 정의 컴포넌트

(소문자로 시작하면 일반적인 HTML 엘리먼트로 인식한다.)

function Hello() {
  return <div>Hi</div>;
}

function HelloWorld() {
  return <Hello />;
}

5) 조건부 렌더링에는 삼항연산자 사용한다.

(if문이 아닌 삼항연산자를 이용해야한다.)

<div>
  {1 + 1 === 2 ? <p>정답</p> : <p>탈락</p>}
</div>

6) 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 사용한다.

- map 함수를 사용할 때 반드시 "key" JSX 속성을 넣어야 한다.

const posts = [
  { id: 1, title: "Hello", content: "Welcome" },
  { id: 2, title: "World", content: "Welcome !!" },
];

function App() {
  const content = post.map((post) => {
    <div key={post.id}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>;
  });
}

2. map을 이용한 반복

map (내장 고차 함수)

: React에서 여러 데이터를 렌더링 할 때 사용
=> 배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정(map)한다.

const posts = [
  { id: 1, title: "Hello", content: "Welcome" },
  { id: 2, title: "World", content: "Welcome!!" },
];

function App() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div>{blogs}</div>;
}
export default App;

- key 속성

: 변하지 않고, 예상 가능하며, 유일해야 한다.

• key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 한다.
  (만약 고유한 id가 없는 경우 배열 인덱스를 넣어서 해결, 배열 인덱스는 최후의 수단으로 사용)
• key 속성의 위치 : map 메서드 내부에 있는 엘리먼트, 첫 엘리먼트에 넣어준다.

React에서 map 메서드 사용 시, key 속성을 넣지 않으면 key를 넣어야 한다는 경고를 출력한다.

const posts = [
  { id: 1, title: "Hello", content: "Welcome" },
  { id: 2, title: "World", content: "!!" }
];

function App() {
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div>{blogs}</div>;
}

export default App;

3. Component

: 하나의 기능 구현을 위한 여러 종류의 코드 묶음 or UI를 구성하는 필수 요소

=> 위와 같이 컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있다.

• 모든 React 애플리케이션은 컴포넌트들의 관계를 위와 같이 트리 구조로 형상화하여 표현할 수 있다.
  최상위 컴포넌트는 근원(root)역할을 하므로 다른 자식 컴포넌트를 가질 수 있다.

• 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당한다.
  이러한 컴포넌트들을 모아 복잡한 UI를 구성할 수 있고, 복잡한 어플리케이션도 만들 수 있다.

• 컴포넌트 기반 개발의 특징
  - 기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발한다.
  - 마크업, 디자인, 로직을 연결하여 개발을 할 수 있다.
  - 재사용이 가능하여 효율적인 개발이 가능하다.
  - 컴포넌트 간 의존성이 낮고, 독립적으로 작동한다.

---

🔥 Create React App

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

- 프로젝트 생성 : npx create-react-app 폴더명
- 애플리케이션 실행 : npm start