codestates / codestates/aneun-dongne

[ Dev-log ] 12/18 류준열

Open
#169 0 comments 0 reactions 0 assignees View on GitHub
Dev Log
Dominant language
JavaScript
Stars
6
Forks
7
PR merge metrics
No merged PRs in 30d

Description

> ### 오늘은 어떻게 프로젝트에 기여했나요?
> - 반응형 마무리, 관심사분리, 리렌더링이 불필요한 항목들에 `useMemo`, `React.memo()`사용하여 최적화
> - 홈화면 버그 원인발견 : 이유는 모르겠지만 좌표값이 0,0 인 항목이 무작위적으로 클라이언트에게 전달되고 그대로 카카오맵에 들어올때 하얀지도가 뜸 => 우선 급한대로 클라이언트에서 `filter()`로 걸러주었다.
> ### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
> * 항목별로 적어주세요.
> 오늘은 코딩자체의 시간이 적었어서 굳이 힘든게 없었다.
```js
//해시태그는 매번렌더링되지 않고 상위 2개의 값이 바뀌었을때만 memoTags를 연산하도록 최적화
const memoTags = useMemo(() => tags, [tags[0], tags[1]]);
...(생략)...
//좋아요는 개수가 변하지 않으면 굳이 리렌더링할 필요가 없다.
export const LikeComponent = React.memo(
({ like, likeOrNot, LikeHandler }) => {
return (


{like}


{like}


);
},
(prev, next) => {
//이전렌더링과 다음렌더링의 좋아요 상태가 다를때만 렌더링한다.
//얕은비교하므로 꼭! 값을 비교해야함.
return prev.likeOrNot === next.likeOrNot;
}

```
`React.memo()`의 주의사항은 아무데나 쓰지말고 변화가 적은 컴퍼넌트에서만 사용해야한다는 것이다.
만약 데이터 개수가 많고 변화무쌍한 컴퍼넌트에 `React.memo()`를 사용하면 오히려 최적화연산때문에 리소스를 낭비하게 된다.
다음 상황에서 사용되는것이 권장된다.
스크린샷 2021-12-25 오전 2 26 50

>
> ### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
> * [ ] 내일이면 코딩은 끝날듯

Contributor guide

No contributing guide indexed for this repository

Research direction

This issue is a development log describing React optimization and a client-side map workaround, but it names no file, test, or entry point for a change. Start by confirming whether a separate implementation issue exists; there is no actionable completion criterion in this issue itself.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Documentation
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
10/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.