TIL-220228.md

Today

• Map 컴포넌트 post요청
• 머지 오류 고치기

오늘의 프로젝트에서 힘든 점

• 팀원들과 머지할때는 스무스하게했는데.. 머지를 한 후 내가 만든 기능을 확인해보니 작동되지 않고 빈 화면의 연속이었다. 머지 오류때문에 그런줄 알았지만 사실.. 문제는 "⭐️경우의 수⭐️" 1. 비로그인시 2. 로그인시 (2-1. 데이터가 있을경우 렌더링될 화면, 2-2.데이터가 없을경우 렌더링될 화면) 이렇게 나눠서 코드를 짰어야했는데 나는 1.비로그인시와 2-1의 경우만을 생각해줘 렌더링이 안되었던것이다. 데이터가 없는데도 계속 '왜 안되는거지?'생각했던 내 자신이 어처구니가 없다. 그 동안 나름 경우의 수를 생각해서 코드를 짰다고 생각했었는데.. 아니었다. 코드 다시 다 고쳐야겠다. ⭐️경우의 수⭐️ 늘 유념하자!

조건부 렌더링을 할때 늘 삼항연산자만 사용해야하는줄 알았는데 많은 조건을 이용해서 표현할때는 컴포턴트에 if문을 이용할 수 있었다. 이것도 좀만 빨리알았으면 머리 안터졌을텐데 😂 아래와 같이 사용하면됨

function FishBoard () {
  
   const load = () => {
            if(loading === false) {
                return <><LoadingPage /></> 
            }
            return <>
              <Modal text='회원님이 잡은 물고기 목록을 볼 수 있습니다.'/>
              <Div>   
                  <Title>
                  <h1>나의 월척~</h1>
                  <Btn><Link to='/record' style={{ textDecoration: 'none', color: 'black',fontWeight:'bolder' }}>기록하기</Link></Btn>
                  </Title>
                  {fishboardData()}
              </Div>
              </>
          }
          const fishboardData = () => {
              if(userInfo.isLogin === false) {
                  return <>{result.map(el => <FishList key={el.fishId} {...el} />)} </>
              } else {
                  if (myFishBoard.data === []) {
                      return <h3>기록하신 정보가 없습니다.</h3>
                  } 
                  else if (myFishBoard.data.data.realResult) {
                      return <> {myFishBoard.data.data.realResult.map(el => <FishList key={el.fishId} {...el} render={render} rerender={rerender}/>)}</>
                  }
              }
          }
        
      return (
         <div>
             {load()}
   
         </div>
      )
}