다음에 대해서 정리해보려 한다.

1. scss를 통한 button design - 1편
2. 로그인 페이지 디자인 - 2편
3. 기타 쓸모있는 기능 - 2편

2탄은 React로 로그인 페이지를 설계 및 구현하는데 있어서, 배우고 느꼈던 것들을 정리하려고 한다.

크게 다음과 같은 내용을 담을 것이다.

• 기능에 따른 파일 분할
• 페이지 디자인에 있어서 대중적인 구조 (주관적인 생각일수도)
• 라우팅에 따른 컴포넌트 렌더링

기능에 따른 파일 분할

사람마다 파일을 구성하고 분할하는 방법은 다르지만, 다들 자신의 방법이 가독성이 좋다고 기능에 맞게 잘 분할되어 있다고 말하니깐 나도 한번 말해보려 한다 :)

로그인 페이지의 핵심 기능은 로그인, 회원가입, 비밀번호 찾기 정도로 생각할 수 있다. 그리고 각 기능을 버튼 및 modal 방식으로 구현한 것이 아니라면, 라우팅을 통해 세 기능을 분리하는 것이 편리하다. 세 기능은 분리될 필요는 있지만 모두 입력하는 폼만 다를 뿐 무언가 입력한다는데서 공통점이 있다.

즉, 기능에 따라 view를 달리하여 렌더링하고, Layout에 있어서 통일되는 부분은 그대로 렌더링되어 있도록 만들자.

└── src
     └── assets
     ├── components // 컴포넌트
          ├── Footer.jsx 
          └── NavBar.jsx
     ├── config
     ├── layouts // 전체적인 틀을 담당하는 레이아웃
     	  ├── Admin.jsx 
          ├── Auth.jsx 
          └── Main.jsx
     ├── utils // 로직적인 기능을 위한 함수형 컴포넌트
     ├── views // 페이지 뷰를 담당하는 부분
     	  ├── Login.jsx 
          ├── Register.jsx 
          └── ResetPassword.jsx
     ├── index.js
     └── routes.js

작성하다가... 너무나 무지한 채로 글을 적는 것 같아... 글 두개 이상을 읽고 왔다.

1. 컴포넌트 제대로 만들기
2. 코드 스플리팅 정복하기
3. Optimal file structure for React applications

글을 쓰다 문제점이 무엇이냐하면, components 와 views 로 나누어진 것을 설명하다 컴포넌트의 정의가 헷갈리기 시작했다. 사실 애초에 정확히 모르고 있었기에 위에서 언급한 것처럼 기능에 따른 view, 통일되는 부분과 같은 말을 붙이기에는 무언가 잘 모르고 하는 이야기같았다.

그래서 component의 정의를 한번 찾아보았다.
( 주의! 글이 산으로 가는 중 )

Conceptually, components are like JavaScript functions. They accept arbitrary inputs ( called "props” ) and return React elements describing what should appear on the screen.

"저는 근본적으로 컴포넌트란 데이터를 입력받아 DOM Node를 출력하는 함수라고 생각해요."

그렇다. 현재 Hooks가 도입되면서 클래스형 컴포넌트를 모두 함수형 컴포넌트로 대체하는 것도 애초에 컴포넌트는 함수에 가깝기 때문이다.

또한 파일 분할과 Optimal File Structure 와 Code Splitting 두 개념도 헷갈리고 있었던 것 같다.

결론적으로,

• components 폴더 - 나머지를 제외한 컴포넌트 집합.
• layouts 폴더 - 말 그대로 주 레이아웃 컴포넌트. 페이지 디자인.
• utils 폴더 - 렌더링되는 것이 아닌 전체에 있어서 기능 구현을 위한 컴포넌트
• views 폴더 - 라우터에 의해서 분리되는 페이지 뷰 컴포넌트