리액트는 HTML 태그를 거의 그대로 사용할 수 있게 지원하는 JSX 문법이라는 게 적용된다.
JSX 구문은 생긴 건 HTML과 거의 유사하게 생겼지만 사실은 JavaScript이고, 실행 결과 또한 Javascript 객체로 변환돼서 메모리에서 관리된다.
JSX 구문은 tagName(type), props, children, key 등으로 구성된 객체로 변환되고, HTML의 중첩 구조는 props 객체의 children 프로퍼티를 통해 구현된다. 즉, children 프로퍼티를 사용해 HTML 태그의 위계가 표현된다.
Babel을 사용하면 JSX 구문 분석기를 커스텀할 수 있다. @bable/preset-react의 runtime을 automatic, importSource를 원하는 jsxjsxs 함수를 위치시킬 경로로 설정해 주면 된다(jsxjsxs는 리액트 17 버전부터 적용된 JSX 구문 분석기이다. 리액트의 내장 메서드가 아닌 별도 패키지이기 때문에 React를 import 해오지 않아도 된다.
타입스크립트의 namespace를 쓰면 모듈처럼 하나의 네임 스페이스가 만들어진다. namespace 내부에선 같은 이름 사용이 어려우며, 외부는 자유롭다.
JSX 구문이 분석될 때 JSX라는 타입스크립트의 네임 스페이스에 존재하는 IntrinsicElements, ElementChildrenAttribute, Element 등의 인터페이스가 참조된다. IntrinsicElements는 기본 HTML 요소들, ElementChildrenAttribute는 자식 요소가 될 수 있는 속성들, Element는 JSX 타입 시스템에서 '반환값'을 나타낸다.
실제 JSX 구문의 타입 정의에는 모든 HTML 요소들과 속성을 고려해서 굉장히 복잡하게 이루어져 있다. 만약에 리액트 프로젝트를 빌드에서 진행하는 거라면 가급적 사전에 정의된 타입들을 잘 가져와서 사용하자.
아무래도 '환경 설정'이라는 것을 사실상 거의 처음 해보는 것이기 때문에, 어렵고 시간도 많이 든다. 공부해야 할 게 진짜 많다. 더 노력하자.
할 일 목록 관리 서비스
페이지네이션을 구현했다. 서버에서 내려오는 cursorId와 총 아이템 개수를 나타내는 totalCount, 한 페이지에 보여주고 싶은 항목의 개수 count를 통해 값을 계산해서 뿌려주는 식으로 처리했다.
Math.ceil(totalCount/count) 이런 식으로 값을 계산해서 몇 페이지인지, 어떤 항목을 보여줘야 하는지 등등을 구현할 수 있었다.
페이지네이션 할 때 처음 시작하는 시점의 페이지(cursorId가 null일 때 0으로 처리해서 페이지네이션 가장 앞부분 보여주기)와 가장 뒷부분 페이지(한 페이지에 5개 항목씩 보여준다고 했을 때, cursorId + 5가 totalCount를 초과할 경우)엔 더 이상 페이지 전환을 하지 못하도록 막는 처리를 해주는 게 필요하다.
서버에서 많은 데이터를 내려준다고 하더라도, 그걸 클라이언트에서 다 들고 있는 게 좋지는 않다. 사용자의 컴퓨터 사양에 따라 클라이언트에서 관리되는 정보의 양이 많아질수록 웹 애플리케이션의 성능은 낮아질 수밖에 없다. 가급적 서버에서 받아온 데이터들은 꼭 필요한 것들만 클라이언트에서 들고 있고, 불필요하거나 클라이언트에서 별도 연산으로 값을 낼 수 있는 것들은 로직으로 처리하는 게 더 좋을 수 있다(클라이언트 로직이 너무 커지지 않음을 전제).