React Intro

리액트

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

오픈소스

라이브러리

컴포넌트 Component

리액트를 통해 사용자가 정의한 태그를 말한다.

JSX

리액트를 사용할 때는 리액트만의 특별한 문법인 JSX를 이용해 코드를 작성할 수 있다.

리액트의 특징

리액트에는 크게 3가지로 분류할 수 있는 특징이 있다.

선언형 프로그래밍 지향

HTML / CSS / JS로 나눠서 개발하는 것이 아닌
하나의 파일에 명시적으로 코드를 작성하는 것을 말한다.
이때 JSX를 활용해서 프로그래밍한다.

컴포넌트 기반

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

범용성

리액트는 Javascript 라이브러리이며 Javascript 프로젝트 어디든 적용할 수 있다.
프레임워크는 생태계에 종속되지만 리액트는 기존 프로젝트에도 유연하게 사용 가능하다.
리액트 네이티브로 모바일 개발도 가능하다.

Create React App

Create React App은 리액트 SPA(Single Page Application)을 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.
리액트 앱을 배포하기 위해서는 많은 도구(노드 패키지)들이 필요하다.
이런 툴들을 사용할 수 있도록 개발 환경을 세팅해주는 또다른 툴이라고 할 수 있다.

Function Type vs Class Type

Function Type

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

Class Type

import React from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      
      </div>
    );
  }
}

export default App;

리액트 앱 만들기

npx create-react-app {app-name}

위의 명령을 통해 app-name이라는 리액트 앱을 만들 수 있다.

React Twittler Sprint

트위틀러 앱을 구현해보기