왜 이렇게 고쳤는가?

• 재사용 가능한 로직: useTermsContent라는 커스텀 Hook을 만들어서 다양한 컴포넌트에서 사용 약관을 불러올 수 있도록 함.
• 효율적인 데이터 처리: 사용 약관을 문자열 배열로 변환하여 컴포넌트에서 쉽게 사용할 수 있도록 함.
• 보안: 인증 토큰을 헤더에 포함시켜 안전한 요청을 보장.

작성 코드 및 설명

TokenStorage 클래스

토큰 관리를 위해 이전에 정의된 TokenStorage 클래스를 사용하여 인증 토큰을 가져옵니다.

const tokenStorage = new TokenStorage();
const TOKEN = tokenStorage.getToken();

useTermsContent Hook

이 커스텀 Hook은 사용 약관을 가져와서 문자열 배열로 변환하여 반환합니다.

export default function useTermsContent() {
  const [termsContent, setTermsContent] = useState<string[]>([]);

  useEffect(() => {
    axios({
      method: "GET",
      url: SHARE_REG_API(),
      headers: {
        Authorization: `Bearer ${TOKEN}`,
      },
    })
      .then((res: any) => {
        const lst = res.data.message[0].content.split("\r\n");
        setTermsContent(lst.slice(0, lst.length - 1));
      })
      .catch();
  }, []);

  return termsContent;
}

• Axios 요청: HTTPS를 사용해 API로부터 사용 약관을 가져옵니다.
• 데이터 변환: API에서 가져온 사용 약관을 \r\n 기준으로 분할하고 배열로 변환합니다.
• 상태 관리: 변환된 사용 약관을 컴포넌트에서 사용할 수 있게 상태로 저장합니다.

결론

useTermsContent Hook을 통해 사용 약관 또는 특정 컨텐츠를 불러오는 로직을 모듈화하고 재사용 가능하게 만들었습니다. 이런 패턴은 코드의 유지보수성을 향상시키고, 다른 개발자들이 이해하고 확장하기 쉽게 만듭니다. 이와 같은 커스텀 Hooks를 작성하는 기법은 React에서 깔끔하고 효율적인 코드를 작성하는 데 있어 중요한 원칙 중 하나입니다.