Backend 개발자를 위한 React 기초 정리

서론

대부분의 백엔드 개발자들은 javascript와 jquery만을 사용해서 충분히 웹 사이트를 만들 수 있다. 때문에 시간이 생기면 새로운 infrastructure(인프라) 관련 cloud service를 비롯해 database의 효율적인 관리 및 서비스에 알맞은 database를 찾기 위한 RDBS, NoSQL 학습, 보안 기술이나 성능 최적화에 대한 학습을 진행한다. Backend 개발자가 Front를 개발할 때는 자주 사용하는  Framework(Spring에는 Thymeleaf, Laravel에는 Blade)에서 제공하는 View Template Engine들이 존재하기 때문에 사실상 FrontEnd에서 React가 무슨 이유로 각광받고 있는 건지 학습하려 하지 않는다. 할 이유도 없다고 생각했다.

 

하지만 최근 회사에서 새로 시작하는 신규 프로젝트의 Front는 대부분 React를 사용하여 개발이 진행되었고, 스스로 React에 대해 알아야 그에 맞추어 Backend 개발을 진행할 수 있다고 생각되어 뒤늦게 React에 대한 학습을 시작하게 되었다. 처음이라 너무 막막하고 이해가 가지 않는 부분들이 많았었는데, 학습을 진행하며 나와 같은 Backend 개발자들이 있을 것이라 생각되었고 그에 따라 본 포스팅을 통해 정보를 공유하고자 한다.

 

React, 라이브러리인가? 프레임워크인가?

React는 웹 페이지의 UI를 구축하기 위한 "라이브러리"로 분류된다. UI 컴포넌트를 만들고 관리하는 방법을 제공하지만, 전체 Application의 구조를 강제하거나 프로그램의 흐름을 제어하지 않기 때문에 React 자체는 "라이브러리" 정의에 더 가깝다.

 

그러나 React와 함께 사용되는 도구들 (Redux, React Router 등)과 패턴을 함께 사용하면, React 기반의 Application은 프레임워크와 유사한 구조를 갖출 수 있다. 이런 이유로 일부 사람들은 React를 "프레임워크"처럼 사용할 수 있다고 말한다. 하지만 기술적 정의에 따르면 React는 엄밀히 말해 라이브러리에 더 가깝다.

 

 

간략하게 보는 라이브러리와 프레임워크의 차이점

라이브러리 (Library):

• 정의: 라이브러리는 특정 작업을 수행하기 위한 함수나 기능의 모음이다.
• 제어 흐름: 개발자가 프로그램의 흐름을 제어하고, 필요에 따라 라이브러리의 특정 기능을 호출한다.
• 유연성: 라이브러리는 보통 특정 문제를 해결하기 위한 도구를 제공하지만, 어떻게 그 도구를 사용할지는 개발자의 판단이다.
• 예시: jQuery, React 등

 

프레임워크 (Framework):

• 정의: 프레임워크는 특정 개념이나 기술을 기반으로 한 전체적인 프로그래밍 구조를 제공한다.
• 제어의 역전 (Inversion of Control): 프레임워크가 프로그램의 흐름을 제어하며, 개발자는 프레임워크가 제공하는 특정 구조 안에서 필요한 부분을 구현한다.
• 규칙과 구조: 프레임워크는 보통 엄격한 규칙과 구조를 가지고 있으며, 이를 따르는 것이 필수적이다.
• 예시: Next.js 등

 

자바스크립트로 구현 가능한데 왜 React를 사용하는가?

React의 중요 기능은 Hooks(상태 관리 및 사이드 이펙트) 처리에 있다. JavaScript 기본 문법에서 상태 관리와 사이드 이펙트를 처리하는 방식은 일반적으로 전역 변수, 함수, 그리고 DOM API를 사용한다. React의 Hooks가 등장하기 전에는 이러한 방법들을 사용하여 상태를 관리하고 사이드 이펙트를 처리했다.

 

[JavaScript 기본 문법을 사용한 예제]

 

상태 관리: 전역 변수를 사용하여 상태를 관리한다.

let count = 0;

function incrementCount() {
    count += 1;
    document.getElementById("countDisplay").textContent = `Count: ${count}`;
}

document.getElementById("incrementButton").addEventListener("click", incrementCount);

<div id="countDisplay">Count: 0</div>
<button id="incrementButton">Increment</button>

 

사이드 이펙트 : DOM 조작이나 이벤트 리스너를 추가하여 사이드 이펙트를 처리한다.

document.title = "Initial Title";

function updateTitle() {
    document.title = "Title has been updated";
}

document.getElementById("updateTitleButton").addEventListener("click", updateTitle);

<button id="updateTitleButton">Update Title</button>

 

 

[React Hooks를 사용한 예제]

 

상태 관리 : useState를 사용하여 상태 관리한다.

• useState는 함수 컴포넌트 내에서 상태를 생성하고 관리하는 데 사용된다.
• 상태(State)는 컴포넌트의 데이터 또는 정보를 의미한다. 예를 든다면 사용자의 입력, 선택된 항목, 현재 시간 등이 상태로 관리된다.
• useState는 "상태 변수"와 그 상태를 업데이트하는 함수를 제공한다.

import React, { useState } from 'react';

function Example() {
    // 'count'는 상태변수이고, 'setCount'는 상태를 업데이트하는 함수이다.
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

 

사이드 이펙트 : useEffect를 사용하여 사이드 이펙트를 처리 한다.

• useEffect는 컴포넌트의 렌더링 결과에 영향을 주지 않는 작업들, 즉 사이드 이펙트를 처리하는 데 사용된다.
• 사이드 이펙트는 데이터 가져오기, 구독 설정, DOM 조작 등 컴포넌트의 주요 출력값에 직접적인 영향을 미치지 않는 작업들을 말한다.
• useEffect는 컴포넌트가 렌더링 될 때마다 특정 코드를 실행하게 할 수 있다. 또한 의존성 배열(Dependency array)을 통해 이 코드의 실행을 제어할 수 있다.

import React, { useState, useEffect } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    // 컴포넌트가 렌더링될 때마다 실행된다.
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });
    
    /*
    * 의존성 배열이 있을 경우, count 상태 변수의 값이 변경 될 때만 실행된다.
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);
    */

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

 

 

 

React의 Hooks를 사용하면서의 편리한 점

 

1. 캡슐화 및 재사용성 : 컴포넌트 내부에서 상태와 로직을 캡슐화할 수 있어서 코드의 재사용성과 가독성이 향상된다.
2. 컴포넌트 분리 : 큰 클래스 컴포넌트를 여러 작은 함수 컴포넌트로 쉽게 분리할 수. 있어 유지보수가 용이하다.
3. 사이드 이펙트 제어 : 'useEffect'를 사용하면 사이드 이펙트를 선언적으로 관리할 수 있다. 의존성 배열을 통해 사이드 이펙트의 실행을 정밀하게 제어할 수 있게 되어 코드의 예측 가능성이 높아진다.
4. 상태 관리의 단순화 : 'useState'를 사용하면 컴포넌트 내부 상태를 쉽게 선언하고 업데이트할 수 있게 된다. 이전의 복잡한 상태 관리 로직이 간결해진다.
5. 함수 컴포넌트의 강화 : Hooks의 도입으로 함수 컴포넌트만으로 복잡한 상태 관리와 사이드 이펙트 처리가 가능해져, 클래스 컴포넌트에 의존하는 것을 줄일 수 있게 된다.

결과적으로 React의 Hooks를 사용하면 이전의 JavaScript 기본 문법에 비해 코드가 더 선언적이고 모듈식이 되며, 컴포넌트의 로직을 더 효율적으로 재사용할 수 있게 되기 때문에 편리해진다.

 

 

생소한 용어 - 함수 컴포넌트, 상태 관리, 생명 주기 그리고 Hooks에 대한 정리

 

함수 컴포넌트

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리다. React에서 UI는 컴포넌트로 구성되고, 컴포넌트는 크게 두 종류가 있는데 그중 하나가 함수 컴포넌트다.

 

함수 컴포넌트는 JavaScript 함수처럼 생겼으며, React 요소를 반환한다. 아래는 'Welcome'이라는 이름의 간단한 함수 컴포넌트이다. 이 컴포넌트는 'props'(속성)를 받아서 React 요소를 반환하게 된다.

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

 

 

 

생명 주기

React 컴포넌트는 생성, 업데이트, 소멸과 같은 여러 생명주기 "단계"를 거친다. 각 단계에서 특정 작업을 수행할 수 있으며 예를 들어, 컴포넌트가 화면에 처음 렌더링 될 때 API를 호출하거나, 컴포넌트가 사라질 때 이벤트 리스너를 제거하는 등의 작업이 여기 해당된다.

 

 

Hooks

Hooks는 함수 컴포넌트에서 상태 관리 및 생명주기 기능을 사용할 수 있게 해주는 함수들이다. 가장 기본적인 Hooks에는 상태관리에 사용되는 'useState'와 사이드 이펙트에 사용되는 'useEffect'가 있다.

 

 

 

클래스형 컴포넌트는 사용을 안 하는가?

클래스 컴포넌트는 React에서 컴포넌트를 정의하는 또 다른 방법이다. 클래스 컴포넌트는 'React.Component'를 확장하며, 보통 상태 관리와 생명주기 메서드를 사용한다. 아래는 간단한 클래스 컴포넌트의 예시로, 사용자가 버튼을 클릭할 때마다 카운트가 증가하는 간단한 Counter 클래스를 만든다.

import React from 'react';

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 }; // 상태 초기화
    }

    // 카운트를 증가시키는 메서드
    incrementCount = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={this.incrementCount}>
                    Click me
                </button>
            </div>
        );
    }
}

export default Counter;

 

클래스 컴포넌트는 상태와 생명주기 메서드를 사용하여 더 복잡한 컴포넌트를 구현할 수 있지만, 최근 React 개발에서는 함수 컴포넌트와 Hooks를 사용하는 경향이 강해지고 있다. 클래스 컴포넌트는 여전히 사용할 수 있지만, 함수형 컴포넌트가 더 간결하고 읽기 쉬운 코드를 작성할 수 있게 해주는 것 같다.