6. custom hook

1. 커스텀 훅(Custom Hooks)이란?

커스텀 훅은 React에서 로직을 재사용하기 위한 기능이다.

React 컴포넌트는 상태(state)와 생명주기(lifecycle) 메서드를 가지고 있지만,

특정 로직을 다른 컴포넌트에서도 재사용하고 싶을 때 커스텀 훅을 활용할 수 있다.

 

커스텀 훅은 use 접두사로 시작하는 함수로 구성됩다.

예를 들어, useEffect는 React에서 제공하는 기본 훅이며, 컴포넌트의 부수 효과를 처리하는 로직을 담당한다.

마찬가지로 개발자가 직접 커스텀 훅을 만들어 필요한 로직을 작성할 수 있다.

 

커스텀 훅을 사용하면 로직을 분리하여 컴포넌트를 더 간결하고 읽기 쉽게 유지할 수 있으며, 로직의 재사용성과 테스트 용이성도 향상된다.

2. 커스텀 훅 사용하는 이유

커스텀 훅을 사용하는 이유는 다음과 같다

1. 로직 재사용
->커스텀 훅은 로직을 함수로 추상화하므로, 다른 컴포넌트에서 동일한 로직을 재사용할 수 있다.
이를 통해 중복 코드를 줄이고, 개발 생산성을 향상시킬 수 있다.

2. 컴포넌트의 응집력 향상
->커스텀 훅은 관련된 로직을 한 곳에 모아두므로, 컴포넌트의 응집력을 향상시킨다.
컴포넌트는 뷰를 위한 역할에 집중하고, 로직은 커스텀 훅에서 처리함으로써 컴포넌트의 코드를 더욱 간결하게 유지할 수 있다.

3. 테스트 용이성
->커스텀 훅은 일반 JavaScript 함수이기 때문에 테스트하기 쉽다.
로직을 분리하여 테스트 코드를 작성할 수 있으며,
로직에 대한 단위 테스트와 컴포넌트에 대한 통합 테스트를 보다 효율적으로 수행할 수 있다.

4. 컴포넌트의 관심사 분리
->커스텀 훅을 사용하여 컴포넌트의 로직을 분리함으로써, 컴포넌트는 뷰에 대한 역할에 집중할 수 있다.
이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있다.

 

커스텀 훅은 React 생태계에서 강력한 패턴 중 하나이며, 잘 활용하면 코드의 재사용성과 유지보수성을 향상시킬 수 있다.

커스텀 훅과 웹소켓을 활용해서 영화 어플리케이션을 구현해봤다.

 

 

import React, { useEffect, useState } from "react";

const useSearch = (searchKeyword, basicData) => {
  const [searchData, setSearchData] = useState();

  useEffect(() => {
    setSearchData(
      basicData?.data.movies.filter((data) =>
        data.title.includes(searchKeyword)
      )
    );
  }, [searchKeyword, basicData]);

  return { searchData, setSearchData };
};

export default useSearch;

const express = require("express");
const http = require("http");
const socketIO = require("socket.io");
const cors = require("cors");

const app = express();
app.use(cors());
const server = http.createServer(app);
const io = socketIO(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  console.log("새로운 클라이언트가 연결되었습니다.");

  socket.on("message", (message) => {
    console.log("새로운 메시지:", message);
    io.emit("message", message);
  });

  // 클라이언트 연결 해제 처리
  socket.on("disconnect", () => {
    console.log("클라이언트가 연결을 해제하였습니다.");
  });
});

server.listen(3001, () => {
  console.log("서버가 3001 포트에서 실행 중입니다.");
});

의존적이지 않고 최대한 독립적으로 커스텀훅을 구현하는 것이 중요하다.

 

+웹소켓이란?

웹소켓은 클라이언트와 서버 간 양방향 통신을 위한 기술이다. 일반적으로 HTTP 프로토콜은 클라이언트가 서버에 요청을 보내고, 서버는 클라이언트에 응답을 주는 단방향 통신 방식이다. 하지만 웹소켓은 TCP 소켓 연결을 통해 실시간 양방향 통신을 제공하기 때문에 이 점에서 HTTP프로콜과 차이점이 존재한다.

웹소켓을 사용하면 클라이언트와 서버 간에 지속적인 연결을 유지하고, 서버에서 데이터를 클라이언트로 실시간으로 보낼 수 있다. 이는 실시간 채팅 애플리케이션, 실시간 게임, 주식 시세 업데이트 등과 같이 실시간 데이터 전송이 필요한 다양한 경우에 유용하게 사용 될 수 있다.