ReactNative의 Atomic Design

아토믹 디자인(Atomic Design)은 사용자 인터페이스를 더 작고 재사용 가능한 구성 요소로 분해하여 만드는 방법론입니다. 이 방법론은 원자(Atoms), 분자, 유기체, 템플릿, 페이지의 다섯 가지 레벨로 구성됩니다. 각 레벨은 점점 더 복잡한 수준의 UI 계층 구조를 나타냅니다.

React Native에서는 계층 구조의 각 레벨을 나타내는 컴포넌트를 생성하여 아토믹 디자인(Atomic Design)을 적용할 수 있습니다. 다음은 React Native에서 아토믹 디자인(Atomic Design)을 적용하는 방법에 대한 개요입니다

 

1. 원자(Atoms): UI의 가장 작고 단순한 빌딩 블록입니다. React Native에서 원자(Atoms)에는 텍스트, 아이콘, 버튼, 입력 필드 등이 있습니다. 아톰은 재사용이 가능해야 하며 단일 책임이 있어야 합니다.

import { Text } from 'react-native';

const Heading = ({ children }) => {
  return <Text style={{ fontSize: 24, fontWeight: 'bold' }}>{children}</Text>;
};

export default Heading;

2. 분자: 분자는 더 복잡한 UI 요소를 형성하기 위해 함께 작동하는 원자(Atoms) 그룹입니다. React Native에서 분자의 예로는 양식 입력, 검색창, 아이콘이 있는 버튼 등이 있습니다.

import { View, TextInput, Button } from 'react-native';

const SearchBar = ({ value, onChangeText, onSearch }) => {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <TextInput
        style={{ flex: 1, height: 40, borderWidth: 1, borderColor: 'gray', marginRight: 8 }}
        value={value}
        onChangeText={onChangeText}
        placeholder="Search"
      />
      <Button title="Search" onPress={onSearch} />
    </View>
  );
};

export default SearchBar;

3. 유기체: 복잡한 UI 요소를 형성하기 위해 함께 작동하는 분자 그룹입니다. React Native에서 유기체의 예로는 헤더, 폼 또는 목록이 있습니다.

import { View } from 'react-native';
import Heading from './Heading';
import SearchBar from './SearchBar';

const Header = ({ title, searchValue, onSearchChange, onSearch }) => {
  return (
    <View style={{ backgroundColor: 'white', padding: 16 }}>
      <Heading>{title}</Heading>
      <SearchBar value={searchValue} onChangeText={onSearchChange} onSearch={onSearch} />
    </View>
  );
};

export default Header;

4. 템플릿: 템플릿은 페이지 또는 페이지 섹션의 구조를 정의하는 레이아웃입니다. 템플릿은 유기체, 분자, 원자(Atoms)로 구성될 수 있습니다.

import { View } from 'react-native';
import Header from './Header';
import List from './List';

const HomeScreenTemplate = ({ title, searchValue, onSearchChange, onSearch, data }) => {
  return (
    <View>
      <Header title={title} searchValue={searchValue} onSearchChange={onSearchChange} onSearch={onSearch} />
      <List data={data} />
    </View>
  );
};

export default HomeScreenTemplate;

5. 페이지: 방법론의 최종 결과물로, 애플리케이션의 전체 페이지를 나타냅니다.

import React, { useState } from 'react';
import HomeScreenTemplate from './HomeScreenTemplate';

const HomeScreen = () => {
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState([]);

  const handleSearchChange = (value) => {
    setSearchValue(value);
  };

  const handleSearch = () => {
    // Perform search operation and update data
  };

  return (
    <HomeScreenTemplate
      title="Home"
      searchValue={searchValue}
      onSearchChange={handleSearchChange}
      onSearch={handleSearch}
            data={data}
        />
    );
};

export default HomeScreen;

이 예제에서는 가장 작은 빌딩 블록부터 시작했습니다. 그런 다음 여러 원자(Atoms)를 결합하여 SearchBar 분자를 만들었습니다. 그런 다음 SearchBar와 Heading을 결합하여 Header 유기체를 만들었습니다. 마지막으로 Header를 List 유기체와 결합하여 HomeScreenTemplate 템플릿을 만들었습니다.

아토믹 디자인(Atomic Design)을 사용하면 다양한 방식으로 결합하여 복잡한 사용자 인터페이스를 만들 수 있는 재사용 가능한 컴포넌트를 만들 수 있습니다. 이 접근 방식을 사용하면 코드를 보다 모듈화하고 유지 관리가 쉬우며 확장성을 높일 수 있습니다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0