React Intro

학습 목표

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
• create-react-app 으로 간단한 개발용 React 앱을 만들 수 있다.

1. React Intro

• 리액트 ?
  리액트는 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리이다.

• 리액트의 특징
  선언형이고, 컴포넌트 기반이고, 다양한 곳에서 활용할수 있다.

  • 선언형 : 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
    
  • 컴포넌트 기반 : 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능자체에 집중하여 개발할수 있다.
    
  • 범용성 : 리액트는 JavaScript프로젝트 어디에든 유연하게 적용될수 있다.
    Facebook에서 관리되어 안정적이고, 리액트 네이티브로 모바일 개발도 가능하다.

1-1. JSX

• JSX
  • React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법, 이것을 이용해 React 엘리먼트 생성한다.
  • 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니라서, 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다.
  • Babel : SX를 브라우저가 이해할 수 있는 JavaScript로 컴파일, 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할수 있다.
  • React에서는 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.
  • JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것!

// < DOM으로 엘리먼트 생성하기 예제 >
import "./styles.css";

const user = {
  firstName: "HTML",
  lastName: "DOM"
};

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);

//< React 로 엘리먼트 생성하기 예제 >
import React from "react";
import "./styles.css";

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

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }

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

export default App;

• JSX 문법
  • 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸기
  • React에서 CSS class 속성을 지정하려면 className으로 표기
  • JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용
  • React 엘리먼트가 JSX로 작성되면 "대문자"로 시작( 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 한다), 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식한다.
  • 조건부 렌더링은 if문이 아닌 삼항연산자를 이용 => 삼항연산자는 표현식이어서 변수에 할당 가능
  • React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용 =>
    map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.

const posts = [
  { id: 1, titㅣe: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  // 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
  // obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  // postToJSX 함수를 이용하여 여러 개의 엘리먼트롤 표시
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)}
    </div>
  );
}

1-2. map을 이용한 반복

• 배열 메서드 map의 특성
  • 배열의 각 요소를
  • 특정 논리(함수)에 의해
  • 다른 요소로 지정(map)한다.
• 반복적으로 작성해야 하는 부분을 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링한다.
• return 문 안에서 map 메서드를 사용 : JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메서드의 결과를 return문 안에 인라인으로 처리할 수 있다.

//<데이터가 100개 이상일 때>
const posts = [
    { id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
    { id : 2, title : 'Installation', content : 'You can install React via npm.' },
    { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
    // ...
    { id : 100, title : 'I just got hired!', content : 'OMG!' },
  ];

function Blog() {
  return (
    <div>
      <div>
         <h3>{posts[0].title}</h3>
         <p>{posts[0].content}</p>
     </div>
      <div>
         <h3>{posts[1].title}</h3>
         <p>{posts[1].content}</p>
      </div>
      {// ...}
      <div>
         <h3>{posts[99].title}</h3>
         <p>{posts[99].content}</p>
      </div>
     {// ... 98 * 4 more lines !!}
   </div>
  );
}

//< 배열 메소드 map 활용>
function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

• key 속성
  • key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣어준다.
  • key 속성값은 가능하면 데이터에서 제공하는 id를 할당
  • key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유해야 하기 때문
  • 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결,. 배열 인덱스는 최후의 수단으로만 사용

//<바른 key 속성값 할당의 예>
function Blog() {
  
  const blogs = posts.map((post) => (
	// postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

1-3. Component

• 컴포넌트
  • 하나의 기능 구현을 위한 여러 종류의 코드 묶음, UI를 구성하는 필수 요소
  • 리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.
  • 리액트 어플케이션은 컴포넌트들의 관계를 트리 구조로 형상화하여 표현할 수 있다.
  • 컴포넌트는 재사용 가능하여 효율적인 개발이 가능하다.
  • 기능 별로 하나의 컴포넌트를 작성하면 컴포넌트 간 의존성이 낮아지고 독립적으로 작동하여,
    하나의 기능 변경 시 다른 컴포넌트를 수정할 필요가 없다.
    

2. Create React App

학습 목표

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

• Create React App이란?
  리액트 SPA로 쉽고 빠르게 개발할수 있도록 만드렁진 툴체인
  • git --version :git버전 확인
  • node --version :node버전 확인
  • npm --version :npm버전 확인
  • 터미널 -> cd 작업폴더 -> npx create-react-app 프로젝트명
  • npm install :필요한 모듈설치
  • npm run start : 실제 React Web App을 개발모드로 브라우저에서 실행