리액트 React

리액트는 프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리이다.
리액트는 선언형이고, 컴포넌트 기반이며, 다양한 곳에서 활용할 수 있다는 특징이 있다.

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

JSX - JavaScript XML

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

JSX 규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트를 포함해야 한다.
   여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag가 필요하다.

2. 엘리먼트 클래스 사용 시, class가 아니고 className

3. 자바스크립트 표현식 사용 시, 중괄호{} 사용

4. 컴퍼넌트는 대문자로 시작 (PascalCase)

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

   <div>
     (1+1 === 2) ? (<p>정답입니다.</p>) : (<p>오답입니다</p>)
   </div>

6. 여러 개의 html 엘리먼트 표시할 때, map()함수 사용 !
   map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다.
   "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

import React from "react";

const datas = [
  { id: 1, title: "Hello World", content: "Wecome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React from npm." }
];

function Blog() {
  // 하드코딩 되어있는 리스트를 map 함수를 이용하여 구현해봅시다.
  const blogs = datas.map((data) =>
    <div key={data.id}>
      <h3>{data.title}</h3>
      <p>{data.content}</p>
    </div>
  );
  return (
    <div className="post-wrapper">{blogs}</div>
  );
}
export default Blog;

create-react-app

npx create-react-app [project 이름]