Blog

React Native에서 Tailwind CSS를 활용해 빠르고 일관성 있는 스타일링을 구현하고 싶으신가요? 이번 가이드에서는 NativeWind를 사용해 Tailwind CSS를 React Native 프로젝트에 통합하고 활용하는 방법을 알아봅니다. NativeWind는 Tailwind CSS의 간결함과 React Native의 강력함을 결합하여 효율적이고 직관적인 스타일링 경험을 제공합니다. 이 가이드를 통해 React Native 앱 개발을 더욱 쉽게 시작해 보세요!

https://dev.to/gamertense/getting-started-with-nativewind-using-tailwind-css-in-react-native-13e6

위 내용을 공부하면서 작성한 글입니다. 저작권과 관련 문제가 있으면 알려주세요.

NativeWind 시작하기: React Native에서 Tailwind CSS 사용법

NativeWind는 React Native 프로젝트에서 Tailwind CSS를 사용할 수 있게 해주는 라이브러리로, 모바일 앱 스타일링을 빠르고 효율적으로 구현할 수 있습니다. 이번 가이드에서는 NativeWind를 설정하고 활용하는 방법을 단계별로 설명합니다.

---

NativeWind란?

NativeWind는 Tailwind CSS를 React Native 프로젝트에 통합해 스타일을 작성할 수 있도록 도와주는 라이브러리입니다. 이를 통해 직관적이고 효율적인 스타일링이 가능합니다.

---

NativeWind를 사용하는 이유

• 간편한 사용성: 컴포넌트 안에서 직접 스타일을 작성할 수 있습니다.
• 일관된 디자인: Tailwind CSS는 컴포넌트 간의 일관된 디자인을 보장합니다.
• 빠른 개발 속도: 별도의 CSS 파일 없이 빠르게 스타일을 적용할 수 있습니다.

---

사전 준비

시작하기 전에 다음 항목이 준비되어 있어야 합니다:

• Node.js 설치
• React Native CLI 설치
• React Native 기본 지식

---

설치 및 설정 가이드

1. 새로운 React Native 프로젝트 생성

React Native CLI를 사용해 새 프로젝트를 생성합니다:

npx react-native init MyNativeWindApp
cd MyNativeWindApp

2. NativeWind 설치

NativeWind와 관련된 의존성을 설치합니다:

# NPM
npm install nativewind
npm install --save-dev tailwindcss@3.3.2

# Yarn
yarn add nativewind
yarn add --dev tailwindcss@3.3.2

3. Tailwind CSS 설정

tailwind.config.js 파일을 생성하고 설정을 추가합니다:

npx tailwindcss init

tailwind.config.js를 아래와 같이 업데이트합니다:

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

또한, 프로젝트 루트 디렉토리에 nativewind.d.ts 파일을 생성하고 다음 내용을 추가합니다:

/// <reference types="nativewind/types" />

4. Babel 설정

babel.config.js 파일에 NativeWind 플러그인을 추가합니다:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['nativewind/babel'],
}

5. NativeWind 활용하기

설정을 완료한 후, NativeWind를 사용해 스타일링을 적용할 수 있습니다.

예제: 기본 컴포넌트 스타일링

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

export default function App() {
  return (
    <View className="flex-1 justify-center items-center bg-blue-500">
      <Text className="text-white text-lg">Hello, NativeWind!</Text>
    </View>
  );
}

---

버튼 컴포넌트 구현

다음은 Tailwind CSS 클래스를 사용해 버튼 컴포넌트를 스타일링하는 방법입니다.

버튼 컴포넌트 코드:

import { styled } from 'nativewind';
import React from 'react';
import { Pressable, Text } from 'react-native';

const variantStyles = {
  default: { background: 'bg-white', text: 'text-black' },
  primary: { background: 'bg-blue-500', text: 'text-white' },
};

const StyledPressable = styled(Pressable);

function Button({ title, variant = 'default', onPress }) {
  return (
    <StyledPressable
      onPress={onPress}
      className={`rounded-lg p-2 my-1 ${variantStyles[variant].background}`}>
      <Text className={`text-lg font-bold ${variantStyles[variant].text}`}>
        {title}
      </Text>
    </StyledPressable>
  );
}

export default styled(Button);

앱에서 버튼 사용하기:

import React from 'react';
import { View } from 'react-native';
import Button from './Button';

export default function App() {
  return (
    <View className="flex-1 justify-center items-center">
      <Button title="Press Me" variant="primary" />
    </View>
  );
}

---

결론

NativeWind는 React Native에서 Tailwind CSS를 쉽게 사용할 수 있도록 해주는 강력한 도구입니다. 이번 가이드를 통해 프로젝트에 NativeWind를 설정하고 기본 스타일링을 적용하는 방법을 배웠습니다. NativeWind를 활용해 더욱 빠르고 일관성 있는 디자인을 구현해 보세요! Happy Coding! 😊