[메달 집계 관리] - 조건에 따라 컴포넌트 보여주기

문제 상황

🚨 메달 리스트를 보여주는 표의 제목이 국가 추가 버튼을 누르기도 전에 나와있다.

 

기존에는 국가 추가 버튼을 눌렀을 때 표 제목이 나오도록 코드를 구성했었다.

local storage 사용할 때 새로고침 하면 표 제목이 사라지는 오류가 발생해서, 화면에 나와있는 상태로 되돌렸다.

 

이렇게 되는 이유가 무엇일까?

 

 

문제 원인

✅ 아무런 조건문이 없기 때문이다.

메달 리스트에 입력된 값이 아무것도 없을 때에는 '값을 입력하세요!'라는 문구가 나오게 만들어 줘야 하는데,

그런 로직이 없기 때문이었다.

 

 

해결 과정

✅ '국가 추가' 버튼을 눌렀을 때, 표 제목과 함께 메달 리스트 내용이 화면에 출력되도록 코드를 짜야한다.

단축 평가를 이용하여 local storage에 아무런 값이 없을 때에는 값을 입력하라는 메시지를 출력하고,

값이 있을 때에는 메달 리스트 내용을 보여줘야 한다.

 

const check = medalList.length === 0; // 메달 리스트가 없으면 true를 할당

return (
{ check && <p>아직 추적된 국가가 없습니다. 메달을 추적하세요!</p>;}

{
  check || (
    <div className="medal-list">
      <MedalList medalList={medalList} setMedalList={setMedalList}></MedalList>
    </div>
  );
}
)

&&와 ||을 이용하여 조건에 따라 컴포넌트를 보여주도록 코드를 짜면 된다.

사용자가 아무것도 입력하지 않아 메달 리스트 안에 아무것도 없을 때, check에 true를 할당한다.

&&는 좌변의 값이 true일 때 실행하고, ||는 좌변의 값이 false일 때 실행한다.

메달 리스트 안에 아무것도 없다면, "아직 추적된 국가가 없습니다."의 멘트가 화면에 출력된다.

메달 리스트 안에 1개 이상의 값이 있다면, 해당 내용이 담긴 메달 리스트를 보여준다.

 

 

전체 코드

return (
  <main>
    <MedalForm medalList={medalList} setMedalList={setMedalList}></MedalForm>
    <RadioButton
      medalList={medalList}
      setMedalList={setMedalList}
    ></RadioButton>
    {check && <p>아직 추적된 국가가 없습니다. 메달을 추적하세요!</p>}
    {check || (
      <div className="medal-list">
        <MedalList
          medalList={medalList}
          setMedalList={setMedalList}
        ></MedalList>
      </div>
    )}
  </main>
);

 

 

결과

코드를 수정하면 다음과 같이 잘 작동하게 된다.

이것을 마지막으로 2번째 개인 과제를 완성하였다!