[React] 프론트엔드 대세 경험기

원래는 "프론트엔드 대세 따라잡기"라는 타이틀로 리액트의 특징에 대한 정리부터 간단한 토이 프로젝트 진행까지 순차적으로 게시물을 작성할 계획이었으나, 개인적인 일정이 바빴던 탓도 있고 하나하나 정리하는 것이 꽤 많은 시간이 들어 이 부분은 생략하고 짧게 진행한 토이 프로젝트에 대한 경험을 기록해 보겠다.

 

프로젝트 이야기

프로젝트의 시작은 SNS 상에서 많은 사람들이 서브웨이(샌드위치 판매점)에서 주문하는 방식에 어려움을 겪고 있다는 니즈를 파악한 후였다. 서브웨이는 샌드위치가 만들어지는 모든 단계에서 구매자의 선택을 필요로 하는데 서브웨이 입문자는 첫 번째 단계인 빵 선택부터 많은 어려움을 겪는다. 그래서 내가 생각한 아이디어는 각 단계의 선택지에서 설명과 몇 명의 사람이 선택하였는지를 나타내고 이를 통해 좀 더 쉬운 선택을 할 수 있게 도와주는 서비스이다.

서비스명은 추천을 통해 조합한다는 의미로 Recommend와 Combination을 결합 한 Rebine이다. 짧은 시간 내에 최소 기능 구현을 마쳤는데 서브웨이 공식 앱에서 추천 레시피로 주문하는 기능이 있다는 것을 알고 깔끔하게 개발을 마무리했고 그래서 구동영상을 보면 최종 결과 화면은 고정된 값으로 나온다.

 

시행착오

나는 무언가를 만들면서 기술을 익히는 게 편해서 해당 기술의 특징 정도만 파악하고 프로젝트를 진행하는 경우가 종종 있는데 그런 만큼 시행착오도 많이 겪고 있다. 이 게시물에서는 리액트에서 겪은 시행착오를 정리해보겠다.

Functional Component vs Class-Component

npm을 통해 생성된 프로젝트의 App.js를 따라 여러 컴포넌트들을 코딩했고 각 컴포넌트 간의 상태 유지를 위해 State 기능을 사용하려고 구글링을 하였다. 근데 이상한 점이 Stackoverflow, 블로그 등의 컴포넌트 구조는 내가 만든 구조와 많이 달랐다는 것이다.

내가 만든 컴포넌트는 함수 형태인데 구글에서 찾은 자료는 모두 클래스 형태로 구성되어 있었다.

그렇게 알게 된 점이 리액트는 Functional Component와 Class-Component 두 가지 형태로 나뉜다는 것이다.

두 방식의 차이는 아래 참고 블로그에 자세하게 나와있다. 그래서 결론만 얘기하면 Functional Component가 더욱 적은 코드로 결과물을 낼 수 있고 리액트에서 Functional Component의 성능 향상에 대한 직접적인 언급까지 있었으니 나는 Functional Component로 코드를 구성했다.

 

참고 : medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

State

위 시행착오를 통해 나는 Functional Component를 사용하기로 결정했다.

Functional Component에서 Props는 함수의 인자를 통해 간단하게 전달받을 수 있었는데 State에 대한 사용법을 알지 못했다.

그렇게 검색을 하다 알게 된 것은 기존에는 Functional Component에서 State를 사용할 수 없었지만 리액트 16.8 버전부터 Hooks 기능을 통해 State를 사용할 수 있게 되었다.

사용법은 매우 간단하다.

import {useState} from 'react'; // Hooks를 위해 useState를 import한다.


const [val, setVal] = useState(0); // State로 사용 할 변수 및 set 함수 선언
/*
val은 0으로 초기화 되었다.
State는 Readonly 값 이므로 val에 직접 값 입력이 불가능하다.
그렇기에 함께 선언해준 setVal 함수를 통해 val의 값을 바꿀 수 있다.
*/
setVal(1); // val 값을 1로 변경

// 하위 컴포넌트에서 State에 대한 변경이 이뤄질 때는 Props로 값과 함수를 넘겨 사용하면 된다.
<Child val={val} setVal={setVal}></Child> // Child Component 생성

// Child에서 val을 변경하는 방법
function Child (params) {
  function changeParentState() {
    // params로 전달받은 set 함수를 실행하면 된다.
    params.setVal(1); // val을 1로 변경
  }

  return ...;
}

 

결론

최근에는 주로 백엔드 관련 작업만 하다가 오랜만에 진행 한 프론트엔드 프로젝트였는데 React의 Virtual Dom과 JSX를 통해 화면이 데이터에 반응하여 구성되는 방식이 꽤나 매력적이었고 Component와 Lifecycle 관련 부분을 조금 더 익힌다면 앞으로 진행하는 프로젝트 들에서 효율적으로 활용할 수 있을 것 같다.