[React]React 파일 경로 관리

React에서 코드를 잘 작성하는 것 말고도 정말 중요한 것이 있다!
그게 바로 React 파일 경로를 관리하는 것 📂

root부터 시작해서 어느 파일 하위로 어떤 파일이 들어가는가를 잘 설정하는 것이 나중에 코드의 가독성 및 사람들과의 협업 편리성을 좌우하게 된다 ( •̀∀•́ )✧

예시로 리액트 파일 경로를 하나 가져왔다

이런 식으로 가장 기본 토대인 root부터 시작해서 가지치기하듯 위에서부터 아래로 파일 경로가 내려오는 방향임을 알 수 있다

1. React 파일 역할 및 경로

각 대표 파일의 역할 및 다음과 같이 파일을 사용하는 이유를 조금 더 알아보자~

1. public

정적 리소스를 저장하는 폴더이다

2. (.storybook)

storybook은 우리가 흔히 파이썬에서 사용하는 라이브러리 같은 느낌으로 받아들여도 된다
좀 더 구체적으로 말하자면, storybook은 UI 컴포넌트 개발과 테스트를 위한 오픈소스 도구이자 환경이라고 할 수 있겠다
스토리북은 사용 시 숙지해야할 내용이 많아서 React가 조금 익숙해졌을 때 사용하는 것을 권장한다

3. src

실제 React 애플리케이션의 모든 소스 코드를 포함하는 메인 폴더이다
우리가 실제로 작성하는 코드들은 전부 src의 하위 내용에 들어가 있는 것을 확인할 수 있다

4. assets

우리 흔히 에셋이라고 부르는 것들을 저장한다
어? 아까 컴포넌트도 있지 않았나? 둘의 차이가 뭐지? 🤔 라는 궁금증이 들 수도 있다

• 에셋(Assets)
  에셋(Assets)은 애플리케이션에서 사용하는 정적 리소스이다
  일반적으로 애플리케이션의 시각적인 표현을 지원하는 파일로, 이미지 파일, 폰트 파일, 아이콘, 비디오 등이 주로 assets 파일 내부에 들어간다
  컴포넌트에 관한 설명은 stories 파트에서 다루겠다~

5. constants

애플리케이션 전역에서 사용하는 상수 값(예: API URL, 키값 등)을 정의하는 파일들이 포함된다

6. pages

애플리케이션의 각 페이지를 구성하는 컴포넌트와 스타일 파일들이 위치한다
해당 페이지에 대한 내용들을 묶어서 페이지별로 보게 만든다고 생각하면 좋다
내가 만든 파일에서도 Auth, Home, notice 이렇게 크게 세 페이지로 구분이 되는 것을 pages 폴더에서 한 눈에 볼 수 있다!

그리고 Auth에 대해서 조금 더 말해보자면, 로그인 및 회원가입 관련 페이지 컴포넌트와 스타일 파일이 포함된다
자주 쓰는 용어이니 알아두면 좋을 듯

7. router

React Router를 사용하여 애플리케이션 내의 라우팅을 처리하는 파일이다
그래서 라우터가 뭔데? 라우팅은 뭔데? 이것부터 알려줘 라고 말한다면

• 라우터(Router)
  라우터(Router)는 애플리케이션에서 URL 경로에 따라 적절한 화면(컴포넌트)을 연결해주는 기능을 제공하는 도구이다! 웹에서 페이지 전환을 핵심적으로 담당한다

• 라우팅(Routing)
  라우팅(Routing)은 라우터를 이용해 URL 경로와 해당 경로에서 렌더링될 컴포넌트를 매핑하는 과정을 말한다
  좀 더 쉽게 말하자면... 사용자가 특정 URL을 입력하거나 링크를 클릭했을 때, 그에 맞는 컴포넌트를 보여주는 방식이다
  브라우저에서 새로고침 없이 페이지 전환을 수행하는 SPA에서 특히 중요하다

• 리액트에서의 라우팅
  리액트는 기본적으로 위에서 말한 SPA(Single Page Application)방식을 사용한다
  이는 브라우저가 서버에서 새 페이지를 요청하는 것이 아니라, 클라이언트 측에서 필요한 UI만 부분적으로 업데이트해서 페이지 전환을 수행하는 것이다
  새로고침이 없어 사용자들이 보기에도 편안하고 리소스 절감에도 도움이 되는 아주 중요한 작동 방식이다
  전통적인 페이지 새로고침은 사용자 경험에서도 불편함이 있다
  요렇게 표를 만들어볼 수 있겠다

8. stories

stories 내부에는 components가 위치하는 것을 볼 수 있다
components의 경우에는 지금 코드 상에서 크게 로그인 기능과 관련된 Auth와
여러 팀원들과 공통적으로 사용하는 컴포넌트인 common으로 구성되는 것을 볼 수 있다
다른 팀원들도 사용하는 건 common에 넣어서 리소스를 절감하고, 파일 구조를 통일시켜 에러를 최소화한다
이러한 방식을 사용해야 협업이 용이함❗️
✨코드 짜는 것도 중요하지만 팀원들과 파일 구조를 통일시키는 과정이 먼저다✨

저기 common에 있는 dropdown이 많이 쓰이는 컴포넌트인데...
만드는 과정이 꽤나 난해한 편이다... 내가 저거 만들다가 밤새고 밤새다가 울뻔함🥲

• 컴포넌트(components)
  컴포넌트는 애플리케이션의 UI를 구성하는 코드 단위이며 재사용하기 위한 목적으로 만들어진다
  동적인 동작을 포함하며 상태(state), 속성(props),이벤트 처리를 통해 기능을 제공한다
  (함수랑 느낌이 비슷하다고 볼 수 있다 다들 파이썬이나 C++하던 기억을 꺼내보자)

요런 차이가 있다! 개인적으로 되게 헷갈리던 부분이라 설명이 길어짐

9. styles

전역 스타일 및 CSS 변수를 정의하는 파일들이 포함된다
예시 파일에 있는 global.css 나 globalStyle.ts, variable.module.css 이런 것들이 전역 스타일에 영향을 주는 친구들이다
하나하나 설정하면 힘드니까 스타일을 맞춰두면 팀원들 모두가 사용하기 쉽다

10. utils

유틸리티 함수 및 훅을 저장한다
auth 인증 관련된 유틸리티 파일을 담아 뒀고, useLogin.ts나 useProfile.ts는 커스텀 훅의 내용을 담아둔 것이다
여기서 hook 까지 이야기하면 너무너무너무너무너무 길어지니까 이 부분은 다음에 설명하는 걸로 하고

11. 루트 파일들

App.css, App.tsx, auth.ts, index.css, index.tsx 과 같은 루트 파일들도 있다

2. 파일 관리를 해야 하는 이유

지금껏 이야기했지만 기능적으로 폴더 및 파일을 분리하여 유지보수성 맟 확장성을 높이고 협업을 원할하게 하기 위해서 파일 관리는 필수이다
그냥 일단 코드 쓰고 보는게 중요한게 아니라 어떻게 작성해야 하는지에 대한 큰그림을 그리고 코딩을 시작하는 것이 나중에 피눈물나지 않으니(나도 알고 싶지 않았다...) 주의하도록 하자

오늘의 블로그 마침 ( ´･з･` )♪