20241110 TIL: React Native에서 UI Kitten dependency 최대한 제거하면서 디자인 붙이기

✅ 오늘 배운 것

오늘의 할 일은 다음과 같다. 

 

완성 단계에 있는 디자인을 적용해주면 되고, 위에가 여러 화면과 컴포넌트 디자인 이슈들 중 내가 맡은 것들이다. 차근히 하나씩 해 보자. 위의 이슈들이 컴포넌트 반영 이슈들이고, 아래의 이슈들이 스크린(화면)을 만드는 이슈들이다. 컴포넌트를 만들고 화면을 만드는 것이 우선순위이니 차례대로 해 보자. 

 

우선 맨 위의 '카테고리바 컴포넌트 디자인 반영' 이슈를 보자. 

 

다음은 기존의 코드이다.

const renderItem = ({ item, handlePress }) => (
  <ListItem
    title={item.title}
    accessoryLeft={renderItemIcon}
    onPress={() => handlePress(item)}
  />
);

 

UI Kitten에서 제공하는 라이브러리 덕분에 ListItem이라는 컴포넌트만 쓰면 이런 예쁜 화면이 나왔었다. 

 

이제 이걸 뜯어내 보면, 다시 제로부터 돌아간 태초의 화면이 보인다. 이제 이 화면을 예쁘게 만들어줘야 한다.

 

이제는 외부 라이브러리에서 제공하는 아이콘을 사용하는 게 아니라 SVG 아이콘을 직접 사용해야 한다. 그러므로 피그마에서 아이콘을 직접 다운받고 .svg 파일의 포맷을 사용하기 위해서 필요한 별도 라이브러리를 다운받아 주자. 

npm install react-native-svg react-native-svg-transformer

 

그리고 피그마에 맞게 padding, margin 등의 값을 잘 입력해 주면, 다음과 같은 화면을 볼 수 있다.