[Lynx - React] 튜토리얼 따라가기 - Product Gallery (Part 1)

Lynx의 튜토리얼은 Product Gallery 만들기와 Product Detail 만들기로 구성되어 있다. 나는 그 중에서 갤러리 만들기를 먼저 해볼 예정이다.

 

 

튜토리얼 페이지

 

지난 Quick Start에 이어서 공식문서 탐방을 하고 있다.
오늘은 Tutorial: Product Gallery를 보며 기록했다. 주로 복붙했다. 작업하면서 뭔가 이상하다고 느낀 부분의 코드만 살짝살짝 바꿔서 했다.

블로그 글로 업로드하는 내용은 분량상 2편으로 나눠서 진행할 예정이다.

• Part 1 : 프로젝트 세팅부터 global style, component 하나 만들기, useState 사용하기
• Part 2 : list 태그 사용하기, Auto-Scrolling, MTS(Main Thread Script)로 메인 스레드 다루기

 

ReactLynx

 

이 튜토리얼은 React 기반으로 이뤄진다.
코드 작업을 할 때에는 React에서 직접 import 하지 않고, ReactLynx라는 프레임워크로 사용한다. 프로젝트 세팅을 하면 프레임워크가 설치되어있다.

 

튜토리얼이다보니 Lynx에 대한 지식이 없어도 따라할 수 있고 따라가면서 배우는 느낌으로 진행된다. 직접 해보면서 배우는 방식을 선호하면 Tutorial 파트부터 보면되고, 개념부터 단계별로 배우고 싶다면 Describing the UI 파트부터 천천히 읽어보면 된다고 한다. 나는 튜토리얼부터 한다.

 

Project Setup for the tutorial

[프로젝트 생성]

 

Quick Start 페이지를 보고 프로젝트 세팅을 하자.

먼저 Quick Start 페이지를 보며 Lynx 프로젝트를 만들어야한다.

• Quick Start - Lynx 프로젝트를 처음 실행해보자 ➡️ 공식문서를 한글로 정리한 내용
• 공식문서 - Quick Start

[선수 지식]

 

JavaScript, TypeScript 둘 다 되지만 TypeScript를 권장

 

• 더 나은 개발 환경을 이해 TypeScript를 권장

[기존 코드 제거]

css 파일들과 asset 폴더도 삭제했다.

프로젝트를 생성하면 나오는 기본 페이지 내용, assets 등이 있는데, 다 제거하고 App.tsx에는 딱 이정도의 코드만 남겼다.

 

[CSS 넣기]

공식문서 튜토리얼에 있는 index.css 코드를 복붙하자.

 

index.css 파일을 만들어서 삽입해야한다.
내용이 너무 길기 때문에 튜토리얼 페이지에서 복붙하자.
튜토리얼에서는 CSS를 안가르쳐드릴테니 그냥 쓰라고 언급한다.

App.tsx 1번 라인에 넣어주자. global CSS로 적용된다고 한다.

import './index.css';

 

파일명에 혼동이 있다.

 

현재 공식문서 상에서는 폴더 구조를 알려주지 않고 있으며, index.css인지 scss인지 명시가 불명확하다. 느낌상 scss인 것 같은데, 그냥 css로 했다. 적용은 됐다.

 

[갤러리에 사용할 이미지]

 

갤러리에 사용할 샘플 이미지

 

• 공식문서에서 제공한 링크로 들어가면 예쁜 이미지를 받을 수 있다. (대략 27mb 정도 된다.)
• 압축 파일을 열어보면 안에 tsx로 가구 이미지 관련 컴포넌트도 만들어져있으니 편의를 위해 꼭 다운받아서 사용하자.

갤러리 압축 파일을 해제해서 src에 넣었다.

 

첫 컴포넌트 만들기 (Image Card)

 

src/ImageCard.tsx

 

ImageCard.tsx를 만든다.

 

가구 이미지 리스트에서 0번 인덱스만 똑 꺼내서 일단 이미지 카드로 사용해보는 컴포넌트다.
여기에서 image 태그를 사용한다. 웹에서 사용하는 방식과 동일하게 src, style을 사용하고 JSX 문법에서는 class가 예약어라서 className을 쓰고 있다.

 

✅ Lynx 공식문서 - image 태그 ➡️ Lynx에서 사용하는 image 태그 사용법을 더 알고 싶다면 클릭해서 읽어보자. (어째서인지 alt를 찾지 못했다.)

 

App.tsx에 ImageCard 컴포넌트를 넣었더니 의자 하나가 랜더링된다.

 

App.tsx에 컴포넌트를 넣으면 이렇게 아무튼 이미지 의자가 위에 뜬 생겼다.

 

import를 하면 jsx로 들어간다.

 

어째서인지 계속 import를 하면 jsx 파일로 추가가 되는데, 이유는 모르겠다.
파일은 분명 tsx가 맞는데... 근데 또 적용이 된다. 이건 나중에 이유를 찾아보면 좋을거같다.

 

useState를 통해 인터렉티브 만들기 (좋아요 버튼)

src/LikeIcon.tsx

 

LikeIcon.tsx를 만들어준다. 좋아요(하트) 모양 버튼을 만들어주는 컴포넌트다. 이미지는 갤러리 샘플 이미지를 받을 때 함께 준다.

여기에서 useState를 import할 때, 끌어오는 곳이 React가 아니라 lynx-js/react라는 점을 알 수 있다.
useState 쓰는 방법은 동일하다. 위에 코드처럼 state, setState를 정의하고 onTap 함수로 이벤트를 만들어서 컴포넌트에 엮었다.

 

엮는 방법, 즉 이벤트 핸들링 키워드가 onClick, onTap이 아니라 bindtap인게 특이하다. lynx의 경우 아키텍처의 정적 특성상 React, HTML과 다른 규칙을 따르고, bind*, catch* 방식으로 사용한다고 한다.

 

✅ 공식문서 - Event Handling ➡️ bindtap 관련한 Event Handling에 대한 공식문서다. 나중에 읽어봐야겠다.

 

14번 라인처럼 LikeIcon 컴포넌트를 넣는다.

 

ImageCard에 LikeIcon 컴포넌트를 넣는다.

 

이미지 왼쪽 위에 하트가 나왔다.

 

useState의 setIsLiked 부분을 손봤다. 사진 오른쪽 상단에 하트를 클릭하면 빈하트, 빨간하트로 꿈뻑꿈뻑할 수 있다.
(어째서인지 앱을 껏다 켰더니 CSS가 잘먹어들어가면서 사진이 가운데에 정렬되어 있다. global CSS를 적용하려면 한번 다시 실행해야하나보다...)

 

---

 

마치며

일단 lynx 이번에 처음 생겼고, 발전하는 중이라 그런지 공식문서의 튜토리얼이 엉성하다는 느낌이 든다. 튜토리얼에서 어떤 컴포넌트에서는 화살표 함수를 쓰고 어디에선 function을 쓴다. 일관되지 않다.
index.css인지 scss인지 모르겠는데 어쩌지 싶어지고 그렇다. 상관없나 싶기도 하고...
어째서인지 계속 import를 하면 jsx 파일로 추가가 되는데, 이유는 모르겠다. 이런저런 모르는게 참 많다.
모르는 부분들은 두 개의 튜토리얼을 마무리하고 찾아봐야겠다.