[TIL] 클린 코드 - Custom Hook, Container - Presentational 패턴, 파일/폴더 구조(패턴)

1. 💫 Custom Hook

1) 너무나도 궁금했던 내용 드디어!

저번 뉴스피드 프로젝트 할 때 계속해서 input값을 핸들링하는 hook들을 반복적으로 사용하는데 이걸 어떻게 하면 더 클린하게 리팩토링 할 수 있을지 고민을 했었다.

 

2) 사용방법

1. hooks 폴더 생성 후 use~로 시작하는 (ex. useHookName.js) 파일 생성
2. useState, useEffect, useRef 등 기존 리액트 훅을 이용해서 반복적으로 사용하는 로직을 custom hook으로 만들어준다.
   ➡️ 이 때, custom hook에는 state와 handler 두 가지를 정의해준다.
3. export default 해준 뒤 필요한 곳에서 import하여 사용하면 끝!

 

// useInput.js (예시)
import { useState } from "react";

const useInput = () => {

  // state
  const [value, setValue] = useState('');

  // handler
  const handler = (e) => {
    setValue(e.target.value)
  }

  return [value, handler];
 };

export default useInput;

 

// import React, { useState } from "react";
import useInput from "../hooks/useInput";
import SignUp from "./SignUp";

const App = () => {

  // 1. custom hook 사용
  const [name, onChangeNameHandler] = useInput();
  const [password, onChangePasswordHandler] = useInput();

  // 2. 이제까지 해왔던 기존 방식
  // const [name, setName] = useState('');
  // const [password, setPassword] = useState('');
  // const onChangeNameHandler = (e) => {
  //   setName(e.target.value);
  //  }
  // const onChangePasswordHandler = (e) => {
  //   setPassword(e.target.value);
  // }


  return (
    <>
      <h1>Custom Hooks</h1>
      <input type="text" value={name} onChange={onChangeNameHandler} />
      <input type="password" value={password} onChange={onChangePasswordHandler}/>
      <div>
        <SignUp />
      </div>
    </>
  );
};

export default App;

 

 

3) 장점

• 코드의 반복 사용을 줄여주기 때문에 코드가 간결해짐
• 가독성, 유지보수성 차원에서도 good!

 

---

2. 🪜 Container - Presentational 패턴

컴포넌트를 두 개의 계층으로 분리하는 패턴

• JavaScript(기능)과 JSX(UI)로 나누는 방법

뭐야 그냥 흔한 리액트 컴포넌트 잖아?

 

• Container : JavaScript 영역, UI를 구성하고 변화시키기 위한 기능 로직에 집중하는 계층
• Presentational : JSX 영역, 사용자에게 보이는 UI가 어떻게 구성되어야 하는지에만 집중하는 계층
• Presentational을 Container로 감싼 후에 필요한 정보와 로직들을 props로 전달해주는 형태

 

React 16.8 이후 Hook의 등장으로, 잘 사용하지는 않는 패턴이라고 함

 

 

 

---

3. 🗂️ 파일/폴더 구조(패턴)

Custom hook은 useState, useEffect 등 리액트 훅을 사용하여 반복적으로 사용하는 것들을 커스텀 훅으로 만들어준다는 것은 이해했음.

전부터 궁금했던 건, '날짜 형식 변환'이나 '비밀번호 유효성 검사' 같은 기능들은 왠만한 웹서비스에서 흔하게 반복적으로 사용하는 로직인데 이런 건 어떻게 핸들링할까?

 

1) 함수 모듈로 관리

예시 - timestamp를 2023. 7. 5 12:07 형태로 쓰고 싶으면?
formatTime.js라는 스니펫 모듈 js파일 생성 후, 사용하는 컴포넌트에 import해서 갖다 쓰기

 

// formatTime.js
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours().toString().padStart(2, '0');
  const minute = date.getMinutes().toString().padStart(2, '0');

  return `${year}. ${month}. ${day} ${hour}:${minute}`
};

export default formatTime;

 

// ContentsList.jsx
import React from 'react';
import formatTime from './formatTime';

const ContentsList = () => {

  // ...

  return (
    <>
      ...
      {*/ 여기서 todo.createdAt은 timestamp 형식/*}
      "글 쓴 시간" : {formatTime(todo.createdAt)}
    </>
  );
}

export default ContentsList;

 

 

2) 파일/폴더 분류 구조, 폴더명 컨벤션

📦src
 ┣ 📂hooks
 ┃ ┗ 📜useInput.js
 ┣ 📂lib
 ┃ ┣ 📂helpers
 ┃ ┃ ┗ 📜passwordValidation.js
 ┃ ┃ ┗ 📜formatTime.js
 ┃ ┣ 📂services
 ┃ ┗ 📂utils
 ┣ 📜App.jsx
 ┗ 📜index.js

lib, utils, helpers, services

• lib : 라이브러리 함수나 공통 로직을 보관하는 폴더로, 일반적으로 프로젝트 전체에서 사용되는 코드를 모아두는 곳
• utils / helpers : 재사용 가능 함수, 유틸리티 함수, 헬퍼 함수
• services : API 호출이나 DB 연결 등 서비스 관련

 

유틸 함수와 헬퍼 함수

둘은 비슷한 개념인 것 같으나 찾아본 차이점으로는 다음과 같음 (스택오버플로우인가 영어 사이트 번역한거라 약간 어색)

• utils : 애플리케이션 전체에서 사용할 수 있는 작은 스니펫을 배치할 수 있는 곳. utils에서의 작은 모듈로 더 큰 컴포넌트를 구성할 수 있음
• helpers: 코드 아키텍처 스니펫을 저장하는 공간에 가깝다고 보면 됨. 컴포넌트 부트스트랩과 개발자 인체공학(=개발자들이 평소에 필요로 하는 기능과 디자인에 대한 것들)에 필수적인 것들

	Utils	Helpers
목적	프로그램의 특정 부분에 연결되지 않은 일반 또는 일반 작업 수행	프로그램의 다른 부분에 대한 지원 또는 원조 제공
범위	프로그램 전체 또는 여러 프로그램에서 사용 가능	일반적으로 특정 모듈 또는 프로그램의 일부 내에서 사용
의존성	일반적으로 프로그램의 다른 부분과 독립적	프로그램의 다른 부분이나 외부 라이브러리에 의존하는 경우가 많음
예시	문자열 조작 함수, 수학 라이브러리 등	Form 유효성 검사 함수, 데이터 포맷팅 등