9월 말에서 10월 첫째 주는 React를 열심히 공부했다!
나의 한 주를 돌아보자면 두 종류의 컴포넌트(Class & Function), State / Props부터 Redux, Router, 그리고 나를 아직까지도 괴롭히는 악랄한 Styled-Components 까지 접해봤다.
처음 만들어본 To-Do List
첫 React 입문 프로젝트로 나만의 작은 To-Do List를 만들어보았다. 컴포넌트 활용을 연습하기 위해서 클래스형 컴포넌트와 함수형 컴포넌트를 모두 사용해보았다. 클래스형 컴포넌트는 this를 계속 작성 해주어야하는 특징이 굉장히 불편하다고 느꼈고 자연스럽게 함수형 컴포넌트로 리액트 코드를 작성하게되었다. 또한 만드는 과정에서 최상위 컴포넌트(App)의 state를 props 형태로 하위 컴포넌트로 계속해서 넘겨가는 과정이 굉장히 불편하다고 느꼈다.
SPA를 지원하는 리액트에서 DOM 객체 요소 중 고정되는 Layout 과 같은 컴포넌트를 제외하고 변경되는 나머지 부분만 다시 렌더링 된다고 생각하면 편한데, 함수형 컴포넌트는 결국 JS 문법 상 함수여서 불릴 때 마다 계속해서 DOM 요소들을 리렌더링 하기 때문에 리액트 훅을 검색해서 사용했고 useState, setState를 이용해서 state의 불변성을 지켜주면서 업데이트 해주는 방식을 연습해봤다.
react 라이브러리의 memo를 활용해서 변할 일이 없는 하나하나 각각의 To-Do들을 memo 함수형 컴포넌트로 만들어도봤다.
여기에 Redux를 얹는다면?
위에서 느꼈던 state를 props로 계속해서 넘겨줘야하는 불편함을 해소하기 위해 Redux를 활용해봤다.
내가 이해한 Redux의 과정들을 정리해보자면..
1.글로벌하게 사용할 state를 위한 store를 만들어주고,
2.state와 reducer, action-creator가 담긴 모듈을 store에 연결해줬다.
3.index.js에서 Provider로 store를 공유해줬고,
4.특정 컴포넌트에서 글로벌한 state를 사용하기위해 useSelector로 구독한다.
이정도로 정리해볼 수 있겠다.
개인적으로 프로젝트 진행 전 글로벌하게 사용할 state를 정하고 미리 스토어와 모듈을 만들어두는게 진행하기 쉬울거라고 생각이든다. 리듀서도 당연히 이전에 사용하던 useState 처럼 불변성을 지켜주는것이 너무너무너무너무 중요하다!!
서버리스(serverless)란?
서버리스(serverless)란 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델입니다.
검색하면 나오는 서버리스의 정의이다.
결국 개발자들이 서버구축이아니라 어플리케이션 개발에 더 힘을 쏟을 수 있도록 도와주는 무언가라고 생각하면 이해하기 쉽다.
나는 위에서 만들었던 To-Do List의 여러 버전들을 GitHub 레포에 등록한 후 서버리스 컴퓨팅 서비스를 이용해서 배포해봤다. 이용했던 서버리스 컴퓨팅 서비스는 netlify와 vercel 이었는데 vercel의 경우 배포하는 과정에서 파일명 변경의 경우 인식을 못해 import 구문에서 오류가나는 문제가 있어서 해결법을 찾는데 애를 좀 먹었었다.
어쨌든 이러한 서버리스 서비스는 일정 수준까지는 등록하는데 굉장히 빠르고 비용도 청구되지않아서 개발 단계에서 굉장히 편하게 이용할 수 있다.
