리팩토링을 해보자

리팩토링을 해보자!

 

리팩토링을 해야하는 이유

• 코드 가독성 개선 : 코드를 더읽기 쉽고 이해하기 쉽게 만듭니다.
  이로인해 다른 개발자와 협업하기 쉽고 유지보수하기도 쉽습니다.
• 버그 수정 및 오류 감소 : 복잡하고 중복된코드는 버그를 발생시키기 쉽습니다.
  반복된 코드는 컴포넌트화함으로써 이를 방지합니다.
• 개발자가 보다 효율적으로 작업할 수 있습니다.

 

 

예시코드입니다.

if (apiRequestType === "post") {
    switch (type) {
      case "counseling":
        DefaultAxiosService.instance
          .post("counseling_comment", {
            content: textReplace,
            writer: nickName,
            postId: postId,
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
        break;
      case "recipe":
        DefaultAxiosService.instance
          .post("recipe_comment", {
            content: textReplace,
            writer: nickName,
            postId: postId,
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
        break;
      case "place":
        DefaultAxiosService.instance
          .post("place_comment", {
            content: textReplace,
            writer: nickName,
            postId: postId,
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
        break;
    }
  } else if (apiRequestType === "put") {
    switch (type) {
      case "counseling":
        DefaultAxiosService.instance
          .put(`counseling_comment/${id}`, {
            content: textReplace,
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
        break;
      case "recipe":
        DefaultAxiosService.instance
          .put(`recipe_comment/${id}`, {
            content: textReplace,
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
        break;
      case "place":
        DefaultAxiosService.instance
          .put(`place_comment/${id}`, {
            content: textReplace,
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
        break;
    }
  }

이코드를 보면 api를 요청하는 코드를 반복적으로 사용하고있습니다.

 

 

반복된 코드를 postComment라는 컴포넌트로 만들어보겠습니다.

interface PostCommentProps {
  type: string;
  content: string;
  writer: string;
  postId: number;
}
export const postComment = ({
  type,
  content,
  writer,
  postId,
}: PostCommentProps) => {
  DefaultAxiosService.instance
    .post(`${type}_comment`, {
      content,
      writer,
      postId,
    })
    .then((res) => console.log(res))
    .catch((err) => console.log(err));
};

이제 postComment 컴포넌트를 사용하여 코드를 수정해보겠습니다.

 

 

if (apiRequestType === "post") {
    switch (type) {
      case "counseling":
        postComment({
          type: "counseling",
          content: textReplace,
          writer: nickName,
          postId: postId,
        });
        break;
      case "recipe":
        postComment({
          type: "recipe",
          content: textReplace,
          writer: nickName,
          postId: postId,
        });
        break;
      case "place":
        postComment({
          type: "place",
          content: textReplace,
          writer: nickName,
          postId: postId,
        });
        break;
    }
  }

컴포넌트화를 했음에도 반복된 코드가 많아보입니다.

 

 

updateComment 컴포넌트를 만들고 ,
"recipe","counseling","place" 라는 배열을 만들어 반복된 코드를 줄여보겠습니다.

const COMMENTTYPE = ["recipe", "place", "counseling"];
if (apiRequestType === "post") {
    COMMENTTYPE.map((item) => {
      if (item === type) {
        postComment({
          type,
          content: textReplace,
          writer: nickName,
          postId: postId,
        });
      }
    });
  } else if (apiRequestType === "put") {
    COMMENTTYPE.map((item) => {
      if (item === type) {
        updateComment({
          type,
          content: textReplace,
          id,
        });
      }
    });
  }

if문을 합쳐서 반복을 줄여보겠습니다.

 

const COMMENTTYPE = ["recipe", "place", "counseling"];
COMMENTTYPE.map((item) => {
    if (item === type && apiRequestType === "post") {
      postComment({
        type,
        content: textReplace,
        writer: nickName,
        postId: postId,
      });
    } else if (item === type && apiRequestType === "put") {
      updateComment({
        type,
        content: textReplace,
        id: id,
      });
    }
  });

코드를 컴포넌트화 하여 반복된 코드를 줄임으로써 , 유지보수가 쉬워지고 코드가 무엇을 의미하는지 직관적으로 보이게 됩니다.