[React] rcc로 컴포넌트 만들기

jsx파일에서 rcc를 입력하고 enter를 누르면 컴포넌트를 빠르게 만들 수 있다. (emmit 지원)

컴포넌트의 기본 템플릿

 

React란 컴포넌트 기반 UI 라이브러리이다. 컴포넌트란 일종의 UI 조각이며, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록의 단위이다. (리액트 앱의 최소 단위) 리액트 개발 시에는 컴포넌트를 파일 단위로 작성한 후 필요한 위치에 import하여 사용한다. 각 컴포넌트는 독립적이고 재사용이 가능하다. =  cohesive(응집적)

 

컴포넌트를 만드는 방법에는 리액트에서 제공하는 컴포넌트라는 디폴트 클래스를 extends한 클래스를 선언하여 제작하는 방법이 있고, 간단하게 함수로 만드는 방법이 있다. 상태에 따라 컴포넌트가 주기적으로 업데이트되야한다면 클래스 컴포넌트를 쓰면 되고, 항상 정적으로 데이터가 표기가 된다면 함수 컴포넌트로 작성한다. 

 

클래스 컴포넌트 (rcc라는 단축어로 만든 컴포넌트) 안을 살펴보면 두 가지 부분으로 나눌 수 있는데, 아래와 같다. 

1) state : 컴포넌트에 들어있는 데이터를 나타내는 오브젝트

2) render : 어떻게 사용자에게 표기될껀지를 jsx 문법으로 작성할 수 있는 함수

 

import React, { Component } from 'react';
import Habit from './habit';

class Habits extends Component {
	// 1) state 부분
    state = {
        habits : [
            { id : 1, name: 'Reading', count: 0},
            { id : 2, name: 'Running', count: 0},
            { id : 3, name: 'Coding', count: 0},
        ],
    };

    handleIncrement = habit => {
      console.log(`handleIncrement ${habit.name}`);
      const habits = [...this.state.habits];
      const index = habits.indexOf(habit);
      habits[index].count++;
      this.setState({  habits });
    };

    handleDecrement = habit => {
        console.log(`handleDecrement ${habit.name}`);
        const habits = [...this.state.habits];
        const index = habits.indexOf(habit);
        const count = habits[index].count - 1;
        habits[index].count = count < 0 ? 0 : count;
        this.setState({ habits });
    };

    handleDelete = habit => {
        console.log(`handleDelete ${habit.name}`);
        const habits = this.state.habits.filter(item => item.id !== habit.id);
        this.setState({ habit });
    };

	// 2) render 부분
    render() {
        return ( 
        <ul>
            {this.state.habits.map(habit => (
              <Habit 
              key={habit.id} 
              habit={habit} 
              onIncrement={this.handleIncrement}
              onDecrement={this.handleDecrement}
              onDelete={this.handleDelete}
              />
            ))}
        </ul>
        );
    }
}

export default Habits;

 

컴포넌트 안의 state라는 오브젝트의 데이터가 변경이 되면, 아래의 랜더 함수가 자동적으로 다시 호출이 된다. 따라서 state의 값이 변경될 때마다 랜더 함수가 반복적으로 호출되어 UI가 업데이트되고, 사용자에게 보여지게 된다. 이때, 모든 구조들이 돔트리에 업데이트되는 것이 아니라 어떤 컴포넌트에 변동사항이 생겨 해당 컴포넌트를 포함한 자식 컴포넌트까지 랜더 함수가 호출이 되면 리액트는 이전의 virtual 돔트리와 변경된 virtual 돔트리를 비교해서, "실질적으로 어떤 부분이 업데이트되어야 하는지 계산"한 다음에 정말 필요한 부분만 실제 돔트리에 업데이트를 한다. 따라서 랜더 함수가 많이 호출되더라도 실질적인 데이터가 변동되지 않을 수 있기 때문에 랜더 함수를 많이 호출한다고 돔트리가 매번 바뀌지는 않는다. 

 

리액트 기술의 원리

리액트는 1) 페이지 이동 시 POST가 서버로 전송되지 않고 처음부터 index.html과 리액트앱을 서버에서 클라이언트 단으로 통채로 던져 클라이언트에서 컴포넌트를 갈아끼우는 방식으로 페이지를 교체한다. 데이터가 필요할 때만 서버에 요청하여 response받아서 처리한다. 2) 리액트앱 메모리 안에 가상의 돔트리를 가지고 있어서, 뷰 업데이트 시 메모리 안의 virtual 돔트리에서 업데이트 이전과 이후의 차이를 비교할 수 있다. -> 차이를 계산한 후 실질적으로 업데이트가 되는 부분만 실제 돔트리에 업데이트하여 성능을 보장한다.