React

목표

• React란 무엇일까?
• 프레임워크와 라이브러리의 차이점
• 왜 React를 다뤄야되는지?

What is React

리액트는 페이스북에서 만든 자바스크립트의 라이브러리 중 하나이다.

A library for creating user interfaces
Renders UI and responds to events!

• 사용자에게 보여지는 UI
• 다양한 이벤트에 맞게 반응을 하는 라이브러리다.

---

MVC 패턴

어플리케이션이 MVC의 관계로 구성되어 있다.
M: model
V: view
C: controller

이중에서도 리액트는 View 레이어를 담당하고 있다.

Framework vs Libraries

Framework

프레임워크는 이미 완성된 상태의 완성품이다.
프레임워크는 정해진 골격 안에서 내가 만드려고하는 기능을 구현해야된다.

Libraries

원하는 기능을 골라서 필요에 따라 부품들을 이용할 수 있다.
라이브러리는 UI 관리 라이브러리, 라우팅, state관리 등 작은 단위, 작은 도메인 안에서 작은 부분을 구현한 것을 말한다.
프레임워크와는 다르게 정해진 골격이 없기 때문에 필요로 하는 것들을 골라서 개발할 수 있다.

---

프레임워크와 라이브러리의 장단점을 놓고보면
프레임워크 중 앵귤러는 배워야하는 컨셉들이 많기 때문에 배우는 시간이 기다고 한다. 그리고 버전이 업데이트 되었을 때 새로운 프레임워크가 나왔다고 할 정도로 호환이 되지 않고, 다시 처음부터 배워야 하는 경우가 발생할 수도 있다고 한다.

그에비해 라이브러리 중 리액트는 버전이 업데이트 되어도 이전 버전과 호환이 잘 되도록 안정성있게 업데이트 되고있다고 한다.

React Component

컴포넌트의 생김새를 먼저 살펴보면

import React from 'react';

class LikeButton extends Component {
  state = {
    countOfLikes: 0,
  };

  render() { 
    return <Button>{this.state.countOfLikes}</Button>;
  }
}

export default LikeButton;

리액트에서 제공하는 컴포넌트 클래스를 상속받아서 사용한다.
state부분과 rendering하는 부분 2가지가 있다.

state: 컴포넌트에 들어있는 데이터를 나타내는 오브젝트
render: 어떻게 사용자에게 표기될 것인지를 나타내는 JSX, 표기

state 값이 변경되면 render 함수가 반복적으로 호출되어진다.