You are currently viewing React Native용 Tailwind 시작하기: NativeWind

React Native용 Tailwind 시작하기: NativeWind

Tailwind CSS는 웹 개발 커뮤니티에 큰 영향을 미쳤다는 사실은 잘 알려져 있습니다. 이 유틸리티-퍼스트 접근 방식은 개발자들이 사용하는 프론트엔드 프레임워크에 관계없이 빠르게 사용자 인터페이스를 만들 수 있게 해줍니다. Tailwind의 디자인 철학의 가치를 인정하며, 커뮤니티는 NativeWind를 통해 모바일 개발 영역까지 그 기능을 확장했습니다.

NativeWind 시작하기: React Native용 Tailwind

NativeWind는 모바일 개발을 위한 Tailwind CSS 통합으로, 맞춤 설정 가능성, 일관된 디자인 언어 및 모바일 우선 반응형 디자인을 자랑합니다. 이 글에서는 NativeWind 라이브러리를 사용하여 네이티브 앱에서 Tailwind 클래스를 작성하는 방법을 배워볼 것입니다. 쉽게 따라하기 위해서는 다음이 필요합니다:

  • React에 대한 기본적인 이해
  • 실제 장치에 설치된 Expo Go
  • 컴퓨터에 설치된 Node.js
  • React Native와 Expo를 사용한 모바일 애플리케이션 개발 경험이 도움이 되지만 필수는 아닙니다. 이제 본격적으로 시작해보겠습니다!

NativeWind가 어떻게 작동하나요?

Mark Lawlor에 의해 만들어진 NativeWind는 Tailwind CSS의 기능을 모바일 애플리케이션에서 소화할 수 있는 형식으로 추상화한 네이티브 라이브러리입니다. 모바일 앱은 브라우저처럼 CSS 엔진이 없기 때문에, NativeWind는 Tailwind 클래스를 지원되는 StyleSheet.create 구문으로 컴파일합니다.

다음은 RN에서 컴포넌트가 어떻게 스타일링되는지 보여주는 짧은 코드 스니펫입니다:

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

RN에서는 className 속성이 지원되지 않습니다. 그러나 NativeWind는 일부 Babel 마법 덕분에 Tailwind 클래스와 함께 className prop을 사용할 수 있게 만듭니다.

그런 다음 NativeWind는 Tailwind 엔진을 사용하여 컴파일하고 스타일을 올바르게 렌더링하기 위해 StyleSheet.create를 래핑한 NativeWindStyleSheet API에 전달합니다.

NativeWind의 뒤에서 일어나는 작업에 대한 기본적인 이해를 갖추었으니, 이제 새로운 RN 애플리케이션에 설치해보겠습니다.

React Native와 Expo를 사용한 개발 워크플로우 설정

컴퓨터의 어느 곳에서나 새 폴더를 만들고 해당 디렉토리를 터미널에서 엽니다. 그런 다음 이 명령을 실행하세요:

npx create-expo-app my-app

cd my-app

이 명령은 폴더에 Expo를 사용한 새 React Native 프로젝트를 생성합니다. 이제 다음을 실행하여 개발 서버를 시작할 수 있습니다:

npm run start

이 명령은 Metro 번들러를 시작하고 잠시 후 터미널에 QR 코드가 나타납니다.

개발 중에 전화기에서 애플리케이션을 보려면 먼저 모바일 장치에 Expo Go가 설치되어 있어야 합니다. 안드로이드의 경우 Expo Go를 실행하고 “QR 코드 스캔” 옵션을 선택합니다. iOS 사용자의 경우 카메라 앱을 열고 표시된 QR 코드를 스캔합니다. 스캔하면 Expo Go에서 애플리케이션을 여는 링크가 포함된 프롬프트가 표시됩니다.

NativeWind 설치

프로젝트에 NativeWind를 추가하려면 nativewind 패키지와 해당 피어 의존성 tailwindcss를 설치하세요:

npm install nativewind && npm install -D tailwindcss@3.3.2

우리는 이 버그를 방지하기 위해 Tailwind CSS의 특정 버전을 고정하고 있습니다 — 이 문제는 NativeWind v4에서 해결될 예정이지만 나중에 더 자세히 다루겠습니다.

다음 명령을 실행하여 프로젝트의 루트에 tailwind.config.js 파일을 생성하세요:

npx tailwindcss init

그런 다음 content 속성을 업데이트하여 Tailwind 스타일을 작성하려는 디렉토리를 지정합니다. 이 경우에는 entry 파일인 App.js와 components 디렉토리의 다른 React 컴포넌트를 포함하겠습니다 — 지금 생성할 수 있습니다:

// tailwind.config.js
module.exports = {
+ content: ['./App.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

다른 디렉토리에서 Tailwind 스타일을 작성할 계획이라면 content 배열에 포함시키십시오. 마지막으로, babel.config.js에 NativeWind용 Babel 플러그인을 추가하세요:

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+   plugins: ["nativewind/babel"],
  };
};

이것이 바로 React Native 애플리케이션에서 Tailwind CSS 클래스를 작성하기 시작하는 데 필요한 모든 것입니다! Bable 설정 파일을 변경했기 때문에 개발 서버를 다시 시작해야 변경사항이 적용됩니다. 계속하기 전에 꼭 그렇게 하세요.

NativeWind로 간단한 이커머스 UI 만들기

이 글에서는 NativeWind와 React Native의 기본 컴포넌트를 사용하여 아래 UI를 재현해보려고 합니다. 호버 효과, 폰트, 다크 모드, 반응형 디자인과 같은 핵심 Tailwind CSS 스타일링 개념을 복습할 것입니다. 또한 useColorScheme과 platformSelect와 같은 NativeWind API를 사용하여 직관적인 UI를 만드는 방법도 배울 것입니다:

이커머스 사용자 인터페이스 라이트 모드
이커머스 사용자 인터페이스 다크 모드
프로젝트 에셋, 이미지 및 제품 데이터를 포함한 모든 것은 이 GitHub 저장소에서 찾을 수 있습니다.

NativeWind 사용자 지정

새 프로젝트에서 Tailwind를 사용할 때 제가 하는 첫 번째 일 중 하나는 디자인에 맞게 설정 파일의 일부 설정을 조정하는 것입니다. 우리의 경우 앱 인터페이스에 몇 가지 추가 색상을 추가하여 시작할 수 있습니다:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        'off-white': {
          DEFAULT: '#E3E3E3',
        },
        dark: {
          DEFAULT: '#1C1C1E',
        },
        'soft-dark': {
          DEFAULT: '#2A2A2F',
        },
      },
    },
  },
  plugins: [],
}

우리는 이 색상 팔레트를 애플리케이션 전반에 사용할 것이므로 tailwind.config.js 파일을 업데이트하여 일치시키십시오.

앱 레이아웃 스타일링

재현하려는 레이아웃에는 두 개의 열이 있습니다. 이를 만들기 위해 App.js 컴포넌트를 정리하고 부모 뷰의 flex 값을 1로 설정하여 장치 화면의 전체 높이를 차지하도록 하겠습니다:

// App.js
import { StatusBar } from 'expo-status-bar'
import { View, SafeAreaView } from 'react-native'
import { products } from './utils/products'

export default function App() {
  return (
    <View className='flex-[1] bg-white pt-8'>
      <StatusBar style="auto" />
      <SafeAreaView />
    </View>
  )
}

우리는 또한 배경을 흰색으로 설정하고 SafeAreaView 컴포넌트를 가져왔습니다 — 이는 카메라 노치, 상태 표시줄 또는 기타 시스템 제공 영역에 의해 앱 콘텐츠가 가려지지 않도록 하는 iOS 전용 컴포넌트입니다.

이제 두 열 레이아웃을 만들기 위해 React Native의 FlatList 컴포넌트를 사용할 수 있습니다.

FlatList를 사용하여 두 열 레이아웃 만들기

React Native의 FlatList 컴포넌트는 대용량 데이터 컬렉션을 렌더링하기 위한 성능 최적화된 방법을 제공하며, 뷰포트에 아직 표시되지 않은 콘텐츠의 지연 로딩, 새로 고침을 위한 당겨서 새로 고침 기능, 스크롤 로딩 등 유용한 기능을 제공합니다.

React Native에서 FlatList를 사용하는 것은 React

DOM에서 데이터를 매핑하는 방식과 유사하지만, FlatList는 반복을 처리하고 레이아웃을 원하는 대로 렌더링하는 데 도움이 되는 몇 가지 prop을 노출합니다. FlatList를 사용할 때 기억해야 할 세 가지 중요한 prop이 있습니다:

  • data: 반복되어 렌더링될 실제 데이터
  • renderItem: 각 반복의 뷰를 나타내는 JSX 요소를 반환해야 하는 함수입니다. 이 함수는 data에서 각 항목을 매개변수로 취합니다
  • keyExtractor: 각 항목에 대한 고유 키를 지정하는 데 사용되며, React가 목록 항목을 효율적으로 식별하고 업데이트하는 데 도움이 됩니다. 이것 역시 data의 각 항목을 prop으로 취합니다

utils/product.js에서 제품 데이터를 가져와서 다음과 같이 Flatlist를 렌더링하세요:

// App.js
import { StatusBar } from 'expo-status-bar'
import { FlatList, View, SafeAreaView } from 'react-native'
import { products } from './utils/products'

export default function App() {
  return (
    <View className='flex-[1] bg-white pt-8'>
      <StatusBar style="auto" />
      <SafeAreaView />
      <FlatList
        data={products}
        numColumns={2}
        renderItem={(product_data) => {
          return (
            <View className='justify-center p-3'>
              <Image
                className='m-5 h-56 w-full mx-auto object-cover bg-slate-500 rounded-lg'
                source={product_data.item.image_url}
              />
              <Text className='text-dark mb-3'>
                {product_data.item.name.substring(0, 30) + '...'}
              </Text>
              <Text className='text-dark font-bold'>
                {`$${product_data.item.price}.00`}
              </Text>
            </View>
        }}
        keyExtractor={(item) => {
          return item.key
        }}
      />
      <Navbar />
    </View>
  )
}

위 스니펫에서는 제품 이미지와 이름, 가격을 보여주는 View를 렌더링했습니다 — 모두 Tailwind 클래스로 스타일링되었습니다. numColums prop을 2로 설정했는데, 이것은 화면의 양쪽 절반에 콘텐츠를 분할하는 데 사용합니다:

항목 주변에 테두리가 있는 사용자 인터페이스

현재, 이 열의 너비는 우리가 원하는 방식으로 제한되지 않습니다. React Native의 Dimensions API를 사용하여 이를 수정할 수 있습니다:

  • 현재 장치의 너비를 가져옵니다
  • 열의 수(2)로 그 값을 나눕니다
  • 그 결과를 FlatList의 각 열 너비로 설정합니다

다음과 같이 하세요:

// App.js
import { StatusBar } from 'expo-status-bar'
import { FlatList, View, Dimensions, SafeAreaView } from 'react-native'
import { products } from './utils/products'
import Product from './components/product'

// 스크린 차원을 사용하여 각 열의 너비 계산
const numColumns = 2
const screen_width = Dimensions.get('window').width
const column_width = screen_width / numColumns

export default function App() {
  return (
    <View className='flex-[1] bg-white pt-8'>
      <StatusBar style="auto" />
      <SafeAreaView />
      <FlatList
        data={products}
        numColumns={numColumns}
        renderItem={(product_data) => {
          return (
            <Product
              image_url={product_data.item.image_url}
              name={product_data.item.name}
              price={product_data.item.price}
              column_width={column_width}
            />
          )
        }}
        keyExtractor={(item) => {
          return item.key
        }}
      />
    </View>
  )
}

이제 우리가 가진 것은 다음과 같습니다:

FlatList 사용자 인터

페이스에 고르게 분포된 테두리

명확성을 위해 제품 뷰를 Product 컴포넌트로 추상화하고 FlatList에서 prop으로 데이터를 전달했습니다. 다음은 Product 컴포넌트입니다:

// components/product.jsx
import { View, Text, Image } from 'react-native'

export default function Product({ image_url, name, price, column_width }) {
  return (
    <View style={{ width: column_width }} className='justify-center p-3'>
      <Image
        className='m-5 h-56 w-full mx-auto object-cover bg-slate-500 rounded-lg'
        source={image_url}
      />
      <Text className='text-dark mb-3'>
        {name.substring(0, 30) + '...'}
      </Text>
      <Text className='text-dark dark:text-white font-bold'>{`$${price}.00`}</Text>
    </View>
  )
}

Navbar 컴포넌트 만들기

우리의 Navbar 컴포넌트는 몇 가지 아이콘을 포함한 flexbox 레이아웃으로 구성될 것입니다. 이제 터미널에서 다음 명령을 실행하여 아이콘 라이브러리와 모바일 애플리케이션에서 SVG가 올바르게 렌더링되도록 도와주는 react-native-svg 종속성을 설치하겠습니다:

npm i react-native-heroicons react-native-svg

과정이 완료되면 Heroicons 라이브러리에서 아이콘을 React Native 프로젝트로 가져와서 color 및 size와 같은 prop을 사용하여 모양을 변경할 수 있습니다:

// components/navbar.jsx
import { Pressable, Platform, View } from 'react-native'
import {
  HomeIcon,
  HeartIcon,
  ShoppingCartIcon,
  SunIcon,
  MoonIcon,
} from 'react-native-heroicons/outline'

export default function Navbar() {
  return (
    <View
      className='px-8 py-6 bg-white shadow-top flex-row items-center justify-between'
    >
      <HomeIcon color="black" size={28} />
      <HeartIcon color="black" size={28} />
      <ShoppingCartIcon color="black" size={28} />
      <Pressable>
        <MoonIcon color="black" size={28} />
      </Pressable>
    </View>
  )
}

제공된 스니펫에서 View 컴포넌트의 flex-direction이 명시적으로 행으로 설정된 것을 볼 수 있습니다. React Native에서 스타일링이 처음이라면 이것이 필요한 이유를 궁금해할 수 있습니다. 왜냐하면 행이 flex-direction 속성의 기본값이기 때문입니다.

하지만 RN에서 flexbox는 다르게 작동합니다. 왜냐하면 모든 View 컴포넌트의 기본 flex-direction은 열로 설정되어 있기 때문입니다. 이 기본 설정은 메인 축과 교차 축의 방향을 변경하므로 justify-content 및 align-items 속성의 의미가 변경됩니다.

우리의 스타일링에서는 의도적으로 flex-direction을 행으로 설정하고 아이콘을 중앙에 정렬했습니다. 아이콘 목록의 마지막 자리는 테마 아이콘 — 태양과 달 —이 Pressable 컴포넌트로 래핑되어 있습니다. 이 설정은 나중에 테마 전환 기능을 추가하는 기반을 마련합니다.

이제 App.js에 navbar를 가져올 수 있습니다:

// App.js
import { StatusBar } from 'expo-status-bar'
import { FlatList, View, Dimensions, SafeAreaView } from 'react-native'
import { products } from './utils/products'
import Navbar from './components/navbar'
import Product from './components/product'

// 스크린 차원을 사용하여 각

 열의 너비 계산
const numColumns = 2
const screen_width = Dimensions.get('window').width
const column_width = screen_width / numColumns

export default function App() {
  return (
    <View className='flex-[1] bg-white pt-8'>
      {/* status bar, safeareaview, and flatlist */}
      <Navbar />
    </View>
  )
}

platformSelect를 사용한 플랫폼별 스타일링

NativeWind에는 platformSelect라는 훅도 있으며, 이는 React Native의 Platform API를 래핑한 것입니다. NativeWind를 사용하면 Tailwind 설정 파일을 통해 앱에 플랫폼별 스타일을 적용할 수 있습니다. 어떻게 하는지 살펴보겠습니다:

// tailwind.config.js
const { platformSelect } = require('nativewind/dist/theme-functions')
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
       'platform-color': platformSelect({
          // 이제 플랫폼별 값을 제공할 수 있습니다
          ios: "green",
          android: "blue",
          default: "#BABABA",
        }),
        dark: {
          DEFAULT: '#1C1C1E',
        },
        'soft-dark': {
          DEFAULT: '#2A2A2F',
        },
      },
    },
  },
  plugins: [],
}

그런 다음 이 클래스를 컴포넌트에서 다음과 같이 사용할 수 있습니다:

import { Text, View } from 'react-native'

export default function MyComponent() {
  <View>
    {/* iOS에서는 녹색 텍스트, Android에서는 파란색 텍스트를 렌더링합니다 */}
    <Text className="text-off-white">플랫폼별!</Text>
  </View>
}

레이아웃에서는 Navbar 컴포넌트에 그림자 효과를 포함하려고 합니다. 그러나 모바일 장치에서는 boxShadow CSS 속성이 지원되지 않으므로, 이를 위한 Tailwind 클래스를 구성하려고 하면 예상대로 작동하지 않을 수 있습니다. 대신, React Native의 원시 Platform API를 사용하여 이 효과를 달성할 것입니다:

// components/navbar.tsx
import { Pressable, Platform, View } from 'react-native'
import {
  HomeIcon,
  HeartIcon,
  ShoppingCartIcon,
  SunIcon,
  MoonIcon,
} from 'react-native-heroicons/outline'

export default function Navbar() {
  return (
    <View
      style={{
        // 플랫폼별로 그림자 스타일을 적용하기 위해 Platform API 사용
        ...Platform.select({
          ios: {
            shadowColor: 'black',
            shadowOffset: { width: 0, height: -5 },
            shadowOpacity: 0.3,
            shadowRadius: 20,
          },
          android: {
            elevation: 3,
          },
        }),
      }}
      className='px-8 py-6 bg-white shadow-top dark:bg-soft-dark flex-row items-center justify-between'
    >
      <HomeIcon color="black" size={28} />
      <HeartIcon color="black" size={28} />
      <ShoppingCartIcon color="black" size={28} />
      <Pressable>
        <SunIcon color="black" size={28} />
      </Pressable>
    </View>
  )
}

Navbar 컴포넌트가 있는 사용자 인터페이스

이제 NativeWind에서 다크 모드를 사용하는 방법을 배워보겠습니다.

NativeWind에서 다크 모드 사용하기

NativeWind는 Tailwind의 다크 모드 스타일링 관행을 원활하게 지원하여, 사용자의 선호도에 따라 앱의 스타일을 설정할 수 있게 해줍니다. NativeWind에서 제공하는 useColorScheme Hook과 dark: 변형 선택자를 사용하면, React Native 애플리케이션에서 쉽게 다크 모드 클래스를 작성할 수 있습니다.

이 훅은 현재 색상 스키마와 수동으로 라이트 모드와 다크 모드 사이의 색상 스키마를 설정하거나 전환하는 메서드를 반환합니다:

import { useColorScheme } from "nativewind";

function MyComponent() {
  const { colorScheme, setColorScheme, toggleColorScheme } = useColorScheme();

  console.log(colorScheme) // 'light' | 'dark'
  setColorScheme('dark')
  toggleColorScheme() // changes colorScheme to opposite of its current value

  return (
    {/* ... */}
  );
}

이제 이 훅을 애플리케이션의 다양한 부분에서 사용할 수 있습니다. 사용자가 Pressable 요소를 클릭할 때 네비게이션 바에서 색상 스키마 전환 기능을 만들어 보겠습니다:

// component/navbar.jsx
import { useColorScheme } from 'nativewind'
import { Pressable, Platform, View } from 'react-native'
import {
  HomeIcon,
  HeartIcon,
  ShoppingCartIcon,
  SunIcon,
  MoonIcon,
} from 'react-native-heroicons/outline'
export default function Navbar() {
  const { colorScheme, toggleColorScheme } = useColorScheme()

  return (
    <View
      className='px-8 py-6 bg-white shadow-top dark:bg-soft-dark flex-row items-center justify-between'
    >
      <HomeIcon color={colorScheme === 'light' ? 'black' : 'white'} size={28} />
      <HeartIcon
        color={colorScheme === 'light' ? 'black' : 'white'}
        size={28}
      />
      <ShoppingCartIcon
        color={colorScheme === 'light' ? 'black' : 'white'}
        size={28}
      />
      <Pressable onPress={toggleColorScheme}>
        {colorScheme === 'light' && (
          <SunIcon
            color={colorScheme === 'light' ? 'black' : 'white'}
            size={28}
          />
        )}
        {colorScheme === 'dark' && (
          <MoonIcon
            color={colorScheme === 'light' ? 'black' : 'white'}
            size={28}
          />
        )}
      </Pressable>
    </View>
  )
}

이제 네비게이션 바의 마지막 아이콘을 클릭하면 라이트 모드와 다크 모드 사이의 테마가 전환됩니다.

이제 앱 전체에 더 많은 다크 모드 클래스를 적용하여 일관된 모습을 만들어 보겠습니다. Product 컴포넌트부터 시작해보겠습니다:

// components/product.jsx
import { View, Text, Image } from 'react-native'
export default function Product({ image_url, name, price, column_width }) {
  return (
    <View style={{ width: column_width }} className='justify-center p-3'>
      <Image
        className='m-5 h-56 w-full mx-auto object-cover bg-slate-500 rounded-lg'
        source={image_url}
      />
      <Text className='text-dark dark:text-white mb-3'>
        {name.substring(0, 30) + '...'}
      </Text>
      <Text className='text-dark dark:text-white font-bold'>{`$${price}.00`}</Text>
    </View>
  )
}

다음으로, 전체 애플리케이션의 부모 View에 다크 모드 클래스를 추가하겠습니다. 또한 색상 스키마에 반응하여 StatusBar의 외관을 스타일링할 수 있습니다:

// App.js
import { StatusBar } from 'expo-status-bar';
import { FlatList, View, Dimensions, SafeAreaView } from 'react-native';
import { products } from './utils/products';
import Navbar from './components/navbar';
import Product from './components/product';
import { useColorScheme } from 'nativewind';

// 화면 크기에 따라 각 열의 너비 계산
const numColumns = 2;
const screen_width = Dimensions.get('window').width;
const column_width = screen_width / numColumns;

export default function App() {
  const { colorScheme } = useColorScheme();
  return (
    <View className='flex-[1] bg-white dark:bg-dark pt-8'>
      <StatusBar style={colorScheme === 'light' ? 'dark' : 'light'} />
      <SafeAreaView />
      <FlatList
        data={products}
        numColumns={numColumns}
        renderItem={(product_data) => {
          return (
            <Product
              image_url={product_data.item.image_url}
              name={product_data.item.name}
              price={product_data.item.price}
              column_width={column_width}
            />
          );
        }}
        keyExtractor={(item) => {
          return item.key;
        }}
      />
      <Navbar />
    </View>
  );
}

NativeWind와 Tailwind CSS의 제한 사항

NativeWind는 모바일 앱 개발에 Tailwind CSS의 편리함을 가져다 주지만, 이 도구가 원래 웹을 위해 만들어진 것에 비해 어떤 제한이 있는지 이해하는 것이 중요합니다.

NativeWind를 사용할 때 염두에 두어야 할 몇 가지 일반적인 특이점은 다음과 같습니다:

  • 네이티브 특정 스타일링: RN에서는 특정 요소에 대한 일부 스타일을 스타일 객체를 통해서만 적용할 수 있습니다. 예를 들어, FlatList의 columnWrapperStyle 속성은 스타일 객체를 사용하여만 적용할 수 있으며 NativeWind 클래스를 통해 접근할 수 없습니다. 네이티브 StyleSheet 객체를 사용해야 하는 다른 많은 상황도 마주치게 될 것이므로, NativeWind와 style 속성을 혼합하는 것을 받아들이세요.
  • 제한된 스타일 속성: 웹 개발에서 흔히 사용되는 일부 스타일 속성은 웹과 비교했을 때 제대로 작동하지 않습니다. 위에서 본 것처럼, 그림자는 웹과 다르게 작동합니다.

NativeWind가 아직 완벽하지는 않지만, 특히 새로운 버전이 곧 출시될 예정이므로 매우 유망해 보입니다.

NativeWind 4의 출시 예정

NativeWind 오픈 소스 커뮤니티는 최근 NativeWind v4의 출시를 예고했습니다. 이 새 버전은 기능과 성능 모두에서 향상을 자랑합니다. 특히 styledComponents에 대한 의존성을 제거하고 웹에서 사용되는 Tailwind 프레임워크와의 호환성을 향상시킵니다.

또한 Expo 팀은 Expo 내에서 Tailwind 지원을 강화하기 위해 NativeWind의 창시자를 영입했습니다. NativeWind v4 문서로의 눈여겨보기에서 많은 흥미로운 업데이트가 드러납니다:

  • 간소화된 설치: NativeWind v4는 react-reanimated를 피어 의존성으로 통합하여 더 효율적인 설치 프로세스를 도입할 것으로 예상됩니다.
  • 버그 수정 및 호환성: NativeWind v4를 통해 최근 Tailwind CSS 업데이트로 인해 발생한 모든 중대한 변경 사항을 해결하기 위한 노력이 진행 중일 가능성이 높으며, 이는 더 원활한 통합과 일관된 기능성을 보장합니다.
  • 새로운 API: vars() 및 withNativewind()와 같은 새로운 API가 도입되어 React Native 애플리케이션 내 스타일링 워크플로우에 대한 향상된 제어를 제공합니다.

결론

NativeWind는 모바일 애플리케이션에서 Tailwind CSS를 작성하기 위한 다리 역할을 훌륭하게 수행하고 있습니다. NativeWind는 웹용으로 작성된 Tailwind CSS의 방식을 모바일에서 크게 지원하기 위해 뒤에서 많은 작업을 합니다. 더 많은 정보는 NativeWind의 공식 문서를 확인하세요.

답글 남기기