웹사이트 예 with typescript

리액트 기본 개념을 배운후 리액트를 웹 사이트 개발에 어떻게 적용할 것인지를 다루는 내용입니다.
또한 create-react-app으로 프로젝트를 생성시 타입스크립트를 적용하였습니다.
props를 타입스크립트로 어떻게 적용하는지도 같이 다룹니다.
전체 소스의 깃저장소 입니다.

https://github.com/eastflag/react-product-ts

리액트로 웹 사이트 개발시 고려사항

퍼블리싱이 끝나면 그 다음에 MVC 패턴 개발의 예처럼 controllef에서 넘어온 데이터를 서버 사이드 언어를 사용해서 화면을 다시 구성하게 된다.

이제 리액트와 같은 컴포넌트 기반 개발방식으로 개발하게 되면 개발단위가 페이지단위가 아니라 컴포넌트 단위로 세분화 되어야 한다.

화면을 보고 퍼블리싱을 먼저 하는게 아니라 화면을 보고 이제 어떤 컴포넌트로 구성해야 할지 컴포넌트 단위로 먼저 쪼개야 한다.

컴포넌트로 구분하게 되면 그 다음에 컴포넌트 별로 퍼블리싱이 적용되어야 한다.

또한, 퍼블리싱의 범위도 순수하게 화면을 구성하도록 되어야지, 달력이라던가, 모달창, 스낵바, 차트 등의 외부 라이브러리를 사용해서 퍼블리싱을 하게 되면 컴포넌트 기반에서는 이것들을 재활용해서 개발하기에는 어려움이 있다.

컴포넌트 개발방식은 DOM을 직접 조작하는게 아니라, 데이터를 바인딩하면 그에 따라서 DOM이 렌더링 되는 방식이므로 차트를 개발하게 된다면 차트에 필요한 데이터만 정의하면 그에 따라서 차트가 렌더링되는 방식이 되기 때문이다.

물론, jquery를 리액트에서 사용할수 없는것은 아니지만, 리액트 기반으로 개발했다면 모든것을 컴포넌트 기반으로 개발하는것이 훨씬 더 확장성, 생산성이 있기 때문이다.

product 메뉴 구현

리액트 다큐먼트 메인 컨셉에 나오는 Think in React 부분을 hooks 와 lodash rm그리고 typescript를 적용하여 재 구성하였다.

먼저 화면과 화면의 요구사항 정의서는 다음과 같다.

• 제품명을 검색할 수 있어야 한다.
• 체크박스를 클릭하면 재고가 있는 것만 필터링
• 재고가 없는 제품은 빨간색으로 표시

그리고 화면을 구성하는 JSON API 는 아래와 같다.

대략적인 html 구성은 다음과 같다.

자 이제 이 화면을 리액트 기반으로 개발할 때 어떻게 하는지 단계별로 살펴보겠다.