React에서 “Left side of comma operator is unused and has no side effects.ts(2695)” 오류 해결

제목: React에서 “Left side of comma operator is unused and has no side effects.ts(2695)” 오류 해결하는 방법

React 프로젝트에서 코드에서 “Left side of comma operator is unused and has no side effects.ts(2695)” 오류 메시지를 만났다면, 올바른 위치에 있습니다. 이 오류는 일반적인 실수로 인해 발생하며 쉽게 해결할 수 있습니다. 이 기사에서는 이 오류의 원인을 알아보고 어떻게 해결하는지에 대한 단계별 지침을 제공합니다.

오류 이해하기

“Left side of comma operator is unused and has no side effects.ts(2695)” 오류 메시지는 코드에서 콤마 연산자 사용에 문제가 있음을 나타냅니다. 콤마 연산자는 좌측과 우측 오퍼랜드를 평가하지만 오직 우측 오퍼랜드의 값을 반환합니다. 좌측 오퍼랜드에 부작용 (즉, 변수를 수정하거나 어떤 작업을 수행하지 않는다면)이 없으면 사용되지 않았다고 간주되며, 이로 인해 오류가 발생할 수 있습니다.

코드 분석하기

오류가 발생하는 코드를 자세히 살펴봅시다:

import React from "react";
import { useRecoilState } from "recoil";
import { Industry, industryState } from "../atoms/industriesAtoms";

const useIndustryData = () => {
  const [industryStateValue, setIndustryStateValue] =
  useRecoilState(industryState);

  const onJoinOrLeaveIndustry = (industryData: Industry, isJoined: boolean) => {
    // 사용자가 로그인되어 있는지 확인
    // 그렇지 않으면 인증 모달 열기

    if (isJoined) {
      leaveIndustry(industryData.id);
      return;
    }
    joinIndustry(industryData);
    // onJoinOrLeaveIndustry;
  };

  const joinIndustry = (industryData: Industry) => {};

  const leaveIndustry = (industryId: string) => {};

  return (
    // 데이터와 함수,
    industryStateValue, onJoinOrLeaveIndustry
  );
};

export default useIndustryData;

오류 해결하기

“Left side of comma operator is unused and has no side effects.ts(2695)” 오류를 해결하기 위해 코드에 작은 수정을 해야 합니다. 값들을 배열이나 객체에 감싸면 두 값이 함께 반환되도록 할 수 있습니다. 다음과 같이 코드를 업데이트해 봅시다:

import React from "react";
import { useRecoilState } from "recoil";
import { Industry, industryState } from "../atoms/industriesAtoms";

const useIndustryData = () => {
  const [industryStateValue, setIndustryStateValue] =
    useRecoilState(industryState);

  const onJoinOrLeaveIndustry = (industryData: Industry, isJoined: boolean) => {
    // 사용자가 로그인되어 있는지 확인
    // 그렇지 않으면 인증 모달 열기

    if (isJoined) {
      leaveIndustry(industryData.id);
      return;
    }
    joinIndustry(industryData);
    // onJoinOrLeaveIndustry;
  };

  const joinIndustry = (industryData: Industry) => {};

  const leaveIndustry = (industryId: string) => {};

  return [
    // 데이터와 함수,
    industryStateValue, onJoinOrLeaveIndustry
  ];
};

export default useIndustryData;

값들을 배열로 감싸면, industryStateValue와 onJoinOrLeaveIndustry가 함께 반환되므로 오류가 해결됩니다.

결론

이 기사에서는 React 애플리케이션에서 발생할 수 있는 “Left side of comma operator is unused and has no side effects.ts(2695)” 오류에 대해 설명했습니다. 이 오류의 원인을 설명하고 해결 방법을 단계별로 제공했습니다.

권장하는 코드 수정을 적용하고 배열을 사용하여 두 값이 함께 반환되도록 함으로써 이 오류를 성공적으로 해결할 수 있습니다. React 컴포넌트가 올바르게 작동되도록 보장할 수 있습니다.

이 기사가 오류 해결과 React 코딩 스킬 향상에 도움이 되었기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs