리액트 & 클린코드 | 변수명 중복 피하기

부모 컴포넌트로부터 전달받은 props의 이름이 자식 컴포넌트의 변수명과 같을 경우, 어떻게 중복을 피하는게 좋을까요? 혹은 부모 컴포넌트로부터 받은 props를 자식 컴포넌트에서 새로운 변수에 할당해서 사용하려고 할 때도 마찬가지로 변수명을 어떻게 지어야할지 고민이 됩니다.

참고 : 전달받은 props와 새로운 변수의 이름이 같을 경우, 코드를 읽기 어렵게 만들 수 있습니다. 이러한 경우, 새로운 변수의 이름을 지을 때 props 이름을 참고하면서, 더 구체적으로 나타낼 수 있는 이름을 사용하는 것이 좋습니다.

💄 변수명 중복을 피하기 위한 규칙

일반적으로, 다음과 같은 규칙을 따르면 좋습니다:

1. props 이름과 유사한 이름을 사용합니다. 예를 들어, props로 전달된 데이터가 “title”인 경우, 새로운 변수의 이름은 “title”과 유사한 “componentTitle” 또는 “titleText”와 같은 이름을 사용할 수 있습니다.
2. 변수의 의미를 더욱 명확하게 나타낼 수 있는 이름을 사용합니다. 예를 들어, “id”라는 props가 있을 경우, 새로운 변수의 이름으로 “articleId” 또는 “userId”와 같이 의미를 더 명확하게 나타낼 수 있는 이름을 사용할 수 있습니다.
3. 변수 이름 앞에 언더스코어(_)나 $ 기호를 추가하여 이름 충돌을 방지할 수 있습니다. 예를 들어, props로 전달된 데이터가 “title”인 경우, 새로운 변수의 이름을 “_title” 또는 “$title”과 같이 지을 수 있습니다.

🧑🏻‍💻 적용해보기

예를 들어, 다음과 같이 새로운 변수의 이름을 지을 수 있습니다.

function MyComponent(props) {
  const { title, id, content } = props;
  const componentTitle = title;
  const articleId = id;
  // componentTitle, articleId 변수를 사용하여 컴포넌트 로직 수행
}

조금 더 구체적으로 적용해보았습니다. 변수의 의미를 더욱 명확하게 나타낼 수 있는 구체적인 변수명을 새로 선언하여 전달받은 props를 할당해주었습니다.

export default function ArticleCard({ article }: ArticleCardProps) {
    const [articleId, setArticleId] = useState<number>();
    const [articleTitle, setArticleTitle] = useState<string>();

    useEffect(() => {
        if (article) { 
            setArticleId(article.articleId);
            setArticleTitle(article.title); // 구체적으로 변수명 짓기
        }
    }, [article]);
}