[React Native] Chat GPT로 개발하기 - 3일차

오늘은 UI 작업을 간단하게 하기 위해서 Atomic 패턴으로 기본적인 Box, Button, Text를 만들어보려고 한다. 

React Native는 깊게 사용하지 않아서 사용하는 속성 부분을 대부분 까먹어서 어려운 도전이 될 것 같다. 

 

react native에서는 display flex가 불가능해?

시작부터 문제가 있었다. 

display 속성을 통해서 flex 설정을 주려고 했는데 계속 오류가 났다.

 

내용을 알고보니 display flex가 기본 값이였다. 

그리고 공간을 차지하는 영역을 결정하는게 flex 옵션이고 그외는 대부분 알고 있던 속성이라 이해했다. 

 

산뜻한 출발!

 

view 컴포넌트에게 margin도 줄 수 있지?

연속으로 부끄러운 수준의 질문 연속이다 ....

margin을 주려고 "0 20px 0 0"와 같은 속성을 줬는데 바로 오류가 발생했다.

 

알고보니 margin을 주기 위해서는 margin-top, margin-bottom처럼 하나하나씩 줘야하는 불편함이 있었다.

 

여기서 나는 생각을 하게 되었다. 

이꼬라지에선 개발이 쉽지 않겠구나 그래서 나는 스타일을 주는 방식부터 기존과 다른 방식을 고민하게 되었다. 

이건 전부터 계속 가지고 있던 생각인데, Atomic 패턴에서 Box, Button, Text와 같은 컴포넌트가 결국 동일한 속성들을 다 
가지고 있는데 매번 만들 때마다 새롭게 스타일을 지정하는 행위가 너무 비효율적이라고 생각했다. 

 

또한 속성을 주는 방식 또한 하나씩 주는 방식은 컴포넌트를 읽을 때 너무 불편하단 생각을 했다. 

예를들어 Box라는 컴포넌트에 width, height, margin, padding, margin-bottom, ... 같은 속성들이 있다고 생각해보자 

 

const Box = (props) => {
  const { width, height, margin, margin-top, margin-bottom , ... , children } = props;
  
  return ( 
    <div 
      width={width}
      height={height}
      margin={margin}
      // ...
      bgColor={bgColor}
    >
      {children}
    </div>
  )
}

전부 작성하기 귀찮아서 이렇게 간추려서 작성했지만 

컴포넌트에서 스타일 속성이 차지하는 비율이 너무 크게 느껴지고 코드 가독성이 많이 떨어진다고 생각했다. 

 

그래서 이러한 문제를 이번 환경 구성을 진행하면서 함께 해결하기로 결심했다. 

 

잠시 아무것도 모르는 민간인 컨셉을 버렸지만 다시 컨셉을 잡고 진행하겠다...! 

 

나는 styled-component와 함께 사용하고 싶거든 import { View } from "react-native"; import { styled } from "styled-components/native"; const NativeBox = styled(View)` ${(props) => props.style} `; export default NativeBox; 이런식으로

 

일단 내가 생각한 컨셉이 가능한지 확인하기 위해서 native에서 어디까지 가능한지 물어보려고 질문했다. 

그러니 기존 react에서의 styled-components와 동일하게 사용할 수 있다는 것을 알게 되었다. 

 

당연히 같은 라이브러리니 문제가 없다고 느낄 수 있겠지만 display 속성이 없다는 것에서 생각보다 많이 

당황 했기 때문에 차근차근 질문을 진행했다. 

 

view 태그에 flex라는 속서응ㄹ 줄 수 없어?

어느정도 컨셉을 잡고 테스트를 하기 위해서 View 컴포넌트에 flex 속성을 줬는데 오류가 발생했다. 

flex in shadow type ... View에서 설정해둔 flex 속성과 값이 달라서 발생하는 오류인 것 같다.

 

<View flex={{value: 1}}><Text>123</Text></View> 이게 가능해?

확실하게 하기 위해서 내 상황에 대한 코드를 알려주면서 가능한 방식인지 물어봤다. 

역시 불가능하다는 안내를 받았다. 

 

그래서 사용하는 모든 속성에 $를 붙여줬다. 문제는 바로 해결이 되었다.