[React Native Web] 앱과 웹을 한번에 개발하기 - 4(feat.Styled-Components)

 

(이때까지 잘 되던 프로젝트에 babel.config.js의 @babel/preset-env가 에러를 내고있습니다. can't find variable에러가 뜰경우

 

해당 presets인 @babel/preset-env을 삭제하고, npm start -- --reset-cache를 실행하여 캐시 삭제 후 npm run ios를 

 

실행하여 확인해보시기 바랍니다! 이 에러 및 자잘한 에러에 대해서 글을 작성 중입니다.)

 

세팅은 어느정도 완료됬으니 이제 뭘 만들면 좋을까 하다가 역시 Todo List가 최고인것 같아서 

 

네이티브앱에 특화된 Todo List를 제작해보도록 하겠습니다.

 

본격적인 시작에 앞서..

 

1-1. styled Component 설치 

npm install --save styled-components

1-2. types 설치 

npm install --save-dev @types/styled-components @types/styled-components-react-native

 

* 디버깅을 위한 babel-plugin-styled-components라는 모듈이있지만, React native환경에서는 적용되지않는 것 같아 제외하였습니다. 잘못알고있으면 댓글 부탁드려요!

 

*styled Components를 사용하는 이유는 analogcoding.tistory.com/181라는 좋은 글이 있으니 참고해주세요! 

하지만 필수는 아니니 설치하지 않으셔도 무관합니다! 

 

2. styled Component 사용해보기

 

전에 작성했던 TextItem.tsx를 아래와 같이 수정합니다.

import React, {FC} from 'react';
import styled from 'styled-components/native';

interface Props {
  text: string;
}

const TextItem: FC<Props> = ({text}) => {
  return <StyledText>{text}</StyledText>;
};

const StyledText = styled.Text`
  font-size: 20px;
`;

export default TextItem;

이전에 사용되던  

import {Text} from 'react-native';

이부분은 styled Component 자체에서 native 컴포넌트를 가지고있으므로

import styled from 'styled-components/native';

로 대체하여야 합니다.

 

그럼 npm으로 설치된 컴포넌트나 styled-components에서 내장되어있지 않은 컴포넌트는 어떻게 처리해야할까요? 

import Swipeout from 'react-native-swipeout';
...
const SwipeList = styled(Swipeout)`
  width: 100%;
`;

위와같이 Swipeout이라는 임의의 npm을 설치하여 불러온 후 styled Component로 스타일링시 위와같이 ()로 감싸주면됩니다.

 

3. Todo list 기본틀 만들기

React Native에서 리스트 형태를 만들때는 FlatList라는 컴포넌트를 활용합니다.

 

공식문서는 https://reactnative.dev/docs/0.63/flatlist를 참조해주세요!

 

/react-native-web/App.tsx의 파일을 아래와 같이 수정해줍시다.

import React from 'react';
import {View, Text, FlatList, ListRenderItem} from 'react-native';
import styled from 'styled-components/native';


type ListItem = {id: string, text: string}
type List = ListItem[]

const list: List = [
  {id: "1", text: "투수리스트를 만들꼬야!"},
  {id: "2", text: "투수리스트를 만들수 있을까..?"},
  {id: "3", text: "투수리스트를 어떻게든 만들자!"},
]

function App() {
  const renderItem: ListRenderItem<ListItem> = ({item}) => {
    return (
        <View>
          <Text>{item.text}</Text>
        </View>
    );
  };

  return (
    <Container>
      <TodoList
        data={list}
        renderItem={renderItem}
        keyExtractor={(item: ListItem)  => item.id}
      />
    </Container>
  );
}

const TodoList = (styled.FlatList`
  width: 100%;
` as unknown) as typeof FlatList;

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
`

export default App;

FlatList를

const TodoList = (styled.FlatList`
  width: 100%;
` as unknown) as typeof FlatList;

위와같이 선언하였는데, styled-components를 사용하지않으면 FlatList와 ListRenderItem을 react-native에서 가져와

 

사용하면 renderItem부분에 타입선언이 어렵지않지만, react Native의 FlatList가 아닌 styled-components

 

자체에서 가지고있는 FlatList를 사용하기 때문에 type of FlatList(react native자체의 FlatList)를 선언해줍니다.

 

id와 text모두 string이기때문에 상단에 선언해주면 리스트 형태로 

 

 

위와같이 노출됩니다. 객체를 추가하면 그만큼 리스트도 늘어나겠지요.

 

그럼 다음엔 약간의 스타일링과 네이티브에서 사용되는 UI npm등을 설치하여 View를 조금 꾸며보도록 하겠습니다.

 

결과물은 https://github.com/kimik-hyum/react-native-web/tree/styled-component 여기서 확인해주세요.