[TIL] 오늘의 기록

클론 프로젝트를 하며 처음으로 Refactoring한 코드 기록

            {
            title === "ALL" || title === "NEW ARRIVAL" || title === "SALE"
              ? DEFAULT_LIST?.map((content, index) => {
                  return (
                    <ProductNavList
                      key={index}
                      content={content}
                      index={index}
                      nameChange={(contents) => this.titleChange(contents)}
                      checkTitle={title}
                    />
                  );
                })
              : navList?.map((content, index) => {
                  return (
                    <ProductNavList
                      key={index}
                      content={content}
                      index={index}
                      nameChange={(contents) => this.titleChange(contents)}
                      checkTitle={title}
                    />
                  );
                })}

위의 코드에서 map을 돌리기 위한 리스트가 바뀌는 것 빼고는 동일한 동작을 한다.
이러한 중복된 부분을 제거하고 코드를 반으로 접기 위해, 변수를 활용하여 조건을 인자로 전달함으로써 좀 더 깔끔하게 작성할 수 있었다.

    const isDefaultList =
      title === "ALL" || title === "NEW ARRIVAL" || title === "SALE";
    const isDefault = isDefaultList ? DEFAULT_LIST : navList;

            {isDefault?.map((content, index) => (
              <ProductNavList
                key={index}
                content={content}
                index={index}
                nameChange={(contents) => this.titleChange(contents)}
                checkTitle={category}
              />
            ))}

조건에 따라 인자만 바뀌고 중복되는 코드를 실행하는 경우에는 변수를 활용하여 코드를 작성하도록 명심해야겠다!