React.js - 리액트란 무엇인가?

React.js

 

 새로 React에 대해 공부할 기회가 생겨 개념을 정리해보려 합니다.
React의 개념과 특징, 사용성에 대해 알아보도록 하겠습니다.

 

가장 먼저, React의 정의는 다음과 같습니다.

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

 

Facebook에서 제공하는 라이브러리이며, 싱글 페이지 어플리케이션(SPA)나 모바일 어플리케이션 구현에 주로 사용됩니다.

 

 

 

React의 특징

 

리액트의 특징은 크게 다음과 같습니다.

1. Props and State
2. Component 기반 구조
3. 가상 DOM 트리
4. 뷰 라이브러리

 

1. Props and State

 

 리액트는 단방향 데이터 흐름 (one-way data flow)라는 특징을 갖고 있습니다. 다른 말로 단방향 바인딩이라고도 하는 이 특징은 데이터기 Tree구조에서 위 -> 아래, 부모 -> 자식의 방향으로만 흐른다는 것을 의미힙니다. 따라서, 자식이 부모의 데이터를 바꿔주기 위해선 state라는 개념을 사용해야 합니다.

 

• Props
  Props란 Properties의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
  부모 컴포넌트에서 자식 컴포넌트로 전달한 데이터는 수정이 불가능하며 참조만 가능합니다. (Read-Only) Props의 수정은 해당 Props를 제공한 최상위 컴포넌트에서만 가능합니다.

 

• State
  State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다.  state는 동적인 데이터(리스트에서 선택된 값이나, 체크박스 등)를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.

 

2. Component 기반 구조

 

리액트는 컴포넌트 기반의 라이브러리 입니다.

여기서 컴포넌트(Component)란 웹 페이지에서 화면일 이루고 있는 작은 요소들을 의미합니다.

한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다.

컴포넌트 구조의 장점은 다음과 같습니다.

 

1. 구조를 한 눈에 파악하기 쉽다.
2. 재사용성이 뛰어나다.
3. 컴포넌트만 import하여 사용하면 되므로 간편하다.

 

컴포넌트의 종류로는 함수형과 클래스형이 존재합니다.

 

1. 클래스형

 

 클래스형 컴포넌트는 상태값(state)를 가질 수 있고 LifeCycle을 가질 수 있습니다.

그러나 리액트 v16.8 부터 함수형 컴포넌트도 상태값(state)과 생명 주기 함수 코드(LifeCycle)를 작성 할 수 있게 되어 현재 자주 사용되지 않는다고 합니다.

 

아래는 클래스형 컴포넌트 예시입니다.

import React, {Component} from 'react';

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

export default App;

 

클래스 컴포넌트의 특징은

 

1. 클래스 컴포넌트는 컴포넌트로 상속을 받아야 합니다.

class App extends Component {}

 

2. render() 메소드가 반드시 있어야 합니다.

render();

 

3. props를 조회할 때 this를 사용합니다.

const { color, name, isSpecial } = this.props;

 

2. 함수형

 

 함수형 컴포넌트의 특징은 다음과 같습니다.

 

• state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
• 메모리 자원을 클래스형 컴포넌트보다 덜 사용합니다.
• 컴포넌트 선언이 편합니다.
• JSX를 return을 통해 반환할 수 있습니다.

 

함수형 컴포넌트가 클래스형 컴포넌트 이후에 나왔기 때문에 사용하기 편합니다. 

클래스형 컴포넌트는 많이 사용되는 추세가 아니지만 클래스형 컴포넌트로 구현된 프로젝트를 유지보수하기 위해 개념은 알아둘 필요가 있습니다.

 

아래는 함수형 컴포넌트의 예시입니다.

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

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

 

 

3. 가상 DOM 트리

 

DOM(Document Object Model)은 html, css, xml등의 파일을 트리 구조로 인식하여 데이터를 객체로 간주하고 관리합니다. 

 

리액트에서는 가상 DOM 구조를 사용하여 이벤트가 발생할 때마다 새로운 DOM을 그리고 기존의 DOM구조와 비교하여 변경이 필요하 지점을 찾아 최소한으로 변경하는 방법으로 효율성과 성능을 개선했습니다.

 

4. 뷰 라이브러리

 

리액트는 프레임워크가 아닌 라이브러리이며, 뷰만을 신경쓰는 라이브러리로 기타 기능은 직접 구현하여 사용해야 합니다.

라우팅에는 리액트 라우터, Ajax통신에는 axios나 fetch, 상태 관리에는 redux나 MobX를 주로 사용합니다.