리액트는 무엇인가?

리액트는 프론트엔드 개발을 위한 자바스크립트 기반 오픈소스 라이브러리이다.

리액트의 3가지 특징

• 선언형
• 컴포넌트 기반
• 다양한 곳에서 활용 가능(범용성)

선언형

리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는
하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다.

범용성

리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있다.
페이스북에서 관리되어 안정적이고 가장 유명하며 리액트 네이티브로 모바일 개발도 가능하다.

JSX?

HTML 문법을 JavaScript 코드 내부에 쓴 것

JSX 예시

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

export default function App() {
  const content = posts;

  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {content}
    </div>
  );
}

리액트 프로젝트 시작 방법

리액트는 npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.

Create React App이란?

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

진행 순서(터미널)

git --version

1. git이 설치되어 있는지 확인한다

npm --version

2. npm이 설치되어 있는지 확인한다.

mkdir '리액트 프로젝트 저장 디렉토리명'

3. 리액트 프로젝트를 저장할 디렉토리를 생성한다.

cd '리액트 프로젝트 저장 디렉토리명'
npx create-react-app '리액트 프로젝트명'

4. 리액트 프로젝트를 저장할 디렉토리로 이동하고 npx create-react-app '리액트 프로젝트명'으로 프로젝트명을 정해서 리액트 프로젝트를 생성한다.

5. 설치 후 Happy hacking 이란 문구가 나오면 정상적으로 리액트 프로젝트가 설치된 것이다.

SPA란?

Single Page Application의 약자이며 단일 페이지 어플리케이션이다.
SPA 구현을 쉽게 말하면 jsp파일 없이 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.