[리팩토링]삼항연산자 - 코드를 줄일 수 있다.

조건 (삼항) 연산자를 쓸 때는 기준이 되는 조건을 무엇으로 할지를 정하는 것이 중요하다. 삼항연산자를 쓰면 코드를 많이 줄일 수 있다.

조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.

function getFee(isMember) {
  return isMember ? '$2.00' : '$10.00';
}

console.log(getFee(true));
// Expected output: "$2.00"

console.log(getFee(false));
// Expected output: "$10.00"

console.log(getFee(null));
// Expected output: "$10.00"

프로젝트 리팩토링 시에 쓰여진 예시:
1.보통은 header와 footer를 layout에 넣고 {children}을 layout으로 감싸주지만 지금 만들고 있는 프로젝트에서는
메인페이지에서의 섹션부분으로 이동하는 헤더 -1)
상품디테일 페이지에서의 메인으로 이동했다가 섹션으로 이동하는 헤더-2) 로 다른 헤더가 필요하다고 생각해서
header도 2개 layout도 2개로 만들었다. 그리고는 각자 다른 Layout1, layout2로 감싸주었다. 하지만 하나의 layout 컴포넌트에서 2가지로 분기하는 코드를 삼항연산자를 사용하여 만들 수 있다.
2. 여기에서 조건은 현재 페이지가 어디에 있느냐가 된다. 이것을 알려면 react-router-dom에서 useLocation을 사용하면 된다.

const Layout = ({ children }) => {
  const handleLogoClick = () => {
    window.location.href = "/";
  };

  const location = useLocation();

  console.log("useLocation:", location);

  return (
    <div>
      {location.pathname === "/" ? (
        <Header logoClick={handleLogoClick} />
      ) : (
        <DetailHeader logoClick={handleLogoClick} />
      )}

      {children}
      <Footer />
    </div>
  );
};

export default Layout;

DetatailHeader 컴포넌트가 다른 점은 react-router-hash-Link를 사용하고 있다는 점이다.

프로젝트 안에서의 다른 예시:

const ToDoList = () => {
  const recentList = useSelector((state) => state.addTask.todos);
  const { clickHeaderButton } = UseMoveToSection();

  return (
    <div id="myTodoSection">
      <ScrollAnimationContainer>
        <CardLayer>
          <h2>To do List</h2>
          <Hr />
          {recentList.length > 0 ? (
            <CardList>
              {recentList?.map((todo) => {
                return <CardComponent todo={todo} />;
              })}
            </CardList>
          ) : (
            <AddButton>
              <img
                src={plus}
                alt="plus"
                style={{ width: "80px" }}
                onClick={() => {
                  clickHeaderButton("addTodoSection");
                }}
              />
              <h2>Adding new tasks</h2>
            </AddButton>
          )}
        </CardLayer>
      </ScrollAnimationContainer>
    </div>
  );
};

export default ToDoList;

삼항연산자를 안썻을 때는 useState로 데이터가 있을 때와 없을 때 ture, false로 각자 다르게 랜더링 해주는 코드를 써서 코드가 길었다. 삼항 연산자를 써주니 훨씬 짧아져서 내용을 알아보기 쉽게 되었다.