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

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

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

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

  • 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 Like

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

아시다시피 폴더구조를 잡는 것에 정답은 없습니다. 개인적으로는 컴포넌트 별로 폴더를 생성하는 것을 좋아하지 않아요. 저는 리액트 네이티브 작업할 경우 하나의 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 Likes

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