20231120TIL

목표

• 렌더링 최적화
• 과제 10-3  구현

새로 알게 된것/ 오늘의 코드

과제10-3 은 

각 필터별  편지가 없을 경우 편지가 없는 멘트가 뜨게 하는 것이다. 

 

이렇게! 

 

간단할 거라고 생각해서 시도했는데 계속 안되는 상황이었다. 결국 팀원분에게 물어봤다

나 : 왜 안될까요..?

???: 걔가 거기있으면 안돼요.

나: 에..?

 {
        filteredLetter
         filteredLetter.length === 0 ? (<LetterStyle direction="column"><span>🙅‍♀️</span>편지가 없습니다! 첫 편지를 작성해주세요!</LetterStyle>) : (
            .map((letter) => (
              <LetterStyle direction="row" key={letter.id} onClick={() => { navigate(`/detail/${letter.id}`) }}>
                <div>
                  <LetterImg src={letter.avatar} alt=''></LetterImg>
                </div>
                <div>
                  <p>{letter.nickname}</p>
                  <TimeStyle>{letter.createdAt}</TimeStyle>
                  {letter.content.length < 23? <ContentStyle height="30px">{letter.content}</ContentStyle> : <ContentStyle height="30px">{letter.content.slice(0,23)}...</ContentStyle>}
                </div>
              </LetterStyle>

            )))
      }

 

내가 하고 있었던 것.. 

왜  카드는 말짱하게 뜨는데 왜 태그가 안뜰까 고민하고 있는데 알려주신것이

 {
        filteredLetter.length === 0 ? (<LetterStyle direction="column"><span>🙅‍♀️</span>편지가 없습니다! 첫 편지를 작성해주세요!</LetterStyle>) : (
          filteredLetter
            .map((letter) => (
              <LetterStyle direction="row" key={letter.id} onClick={() => { navigate(`/detail/${letter.id}`) }}>
                <div>
                  <LetterImg src={letter.avatar} alt=''></LetterImg>
                </div>
                <div>
                  <p>{letter.nickname}</p>
                  <TimeStyle>{letter.createdAt}</TimeStyle>
                  {letter.content.length < 23? <ContentStyle height="30px">{letter.content}</ContentStyle> : <ContentStyle height="30px">{letter.content.slice(0,23)}...</ContentStyle>}
                </div>
              </LetterStyle>

            )))
      }

 

아예 위로 올라가야한다는 것이다. 

위에 내가 적었던 대로 하면

filteredLetter가 0일 때 밑으로 내려가지 않고 끝나버린다. 그래서 태그도 읽히지 않고 끝나서 빈칸인 것이다. 

 

왜 저렇게 쓰고 있었지..? 

 

그리고 .map(()=>{}) 이렇게 썻는데  map(()=>()) 이렇게 써줘야한다고했다.

 

그리고 렌더링 최적화는 다른 건 잘 모르겠어서  제일 쉬운 React.memo() 를 다 해줬다.