5.2. 스타일의 구조화 상속관련 질문있습니다.

리액트 네이티브 2/E
#1

스타일의 구조화 관련해서 날씨프로젝트 예제에 적용을 해볼려다가 좀 혼동이 되는 부분이 있어서 질문을 남깁니다.
5.2.1 스타일 객채 내보내기에 보면 컴포넌트별로 구분된 폴더를 갖는것이라고 설명이되어있습니다.

  • 컴포넌트명
    • index.js (import 구문으로 스타일 불러오기)
    • style.js (스타일정보 설정후 내보내기)

Style_Structs
Style_Structs299×550 25.4 KB

-----------------날씨앱 예상되는 폴더구조 --------------------

  • js

    • components
      • Forecast
        • index.js
        • style.js
        • Forecast.js
      • Weather
        -index.js
        -style.js
        • WeatherProject.js

  • App.js

  • app.json

  • index.js

  • open_weather_map.js

이렇게 구조화 시키면되는건가요. index.js때문에 햇갈리는거같네요.

좋아요 1
#2

개인의 선택입니다. 저는 하나의 파일로…

아시다시피 폴더구조를 잡는 것에 정답은 없습니다. 개인적으로는 컴포넌트 별로 폴더를 생성하는 것을 좋아하지 않아요. 저는 리액트 네이티브 작업할 경우 하나의 js파일에 스타일까지 넣는 것을 선호합니다.
그 이유를 몇가지 적어보자면…

  • index.js로 할 경우 index.js가 너무 많아져서 혼란스러울 때가 있다.
  • 모바일의 경우 스타일이 아주 복잡한경우는 많지 않기에 스타일 코드의 양이 그리 많지 않다.
  • 파일 하나로 할 경우에도 에디터에서 오른쪽 에디터를 분할해서 작업할 수 있다.

폴더로 구분할 경우…

책에서 나온 방법 대로 컴포넌트 별로 폴더를 구분한 경우 말씀하신 부분을 다시 살펴보면

Forecast폴더안에 또 Forecast.js가 있는데 index.js만 존재하고 index.js를 Forecast.js를 대신 사용하는 패턴입니다. index.js를 사용하는 이유는 파일로 존재할 때나 폴더롤 존재할 때 동일하게 import구문을 사용하고 싶어서입니다.

// Forecast안에 index.js가 존재할 경우 폴더명으로 불러오기 가능
import Forecast from './components/Forecast';

// index.js가 없을 경우는 파일명까지 적어줘야한다.
import Forecast from './components/Forecast/Forecast';
좋아요 2
#3

답변 감사합니다. index.js가 많아지면 좀 혼란스러워질거 같긴하네요…