HYEWON JUNG의 개발일지
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() 를 다 해줬다.
'개발일지' 카테고리의 다른 글
20231122 TIL 팀프로젝트 뉴스피드 2일차 (0) | 2023.11.23 |
---|---|
20231121 TIL (1) | 2023.11.22 |
20231117-19 WIL 페이지 보수 , redux (2) | 2023.11.20 |
20231116 TIL Fan Letter -4 버튼클릭 시 색 변경, 이미지 디폴트 지정, useContext 이용하기 (0) | 2023.11.17 |
20231115 TIL Fan Letter -3 상세페이지 수정 삭제 구현 (0) | 2023.11.16 |