Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PERFORMANCE] 리액트 최적화, 조건부 렌더링 HOC 패턴 적용 #223

Merged
merged 4 commits into from
Dec 14, 2021

Conversation

dailyco
Copy link
Contributor

@dailyco dailyco commented Dec 14, 2021

작업 목록

  • 리액트 최적화 - 투표 및 능력 사용 최적화
  • hoc 만들어서 조건부 컴포넌트 생성/적용


설명

  1. 리액트 최적화: 투표 및 능력 사용 최적화

    이전에 해결했던거 커밋을 안하고 계속 묵혀두다가... 오늘 드디어 커밋 완료했슴다,,,

    자세한 내용은 전부 정리 해뒀으니 투표 및 능력 최적화 페이지를 참고하시면 됩니다!

    PR도 전부 생성한 뒤 그냥 제가 바로 머지 시킬게유ㅎㅎㅎ


  1. hoc 만들어서 조건부 컴포넌트 생성/적용

    멘토님이 피드백 주셨을 때 부터 생성해서 적용하고 싶었는데 미루고 미루다 이제야 적용해봅니다ㅎㅎ

    자세한 내용은 React HOC 에 정리해 둘테니 참고하실 분은 정리한 코드랑 함께 보시면 좋을 것 같아요!

    이 내용도 위에 최적화 부분에 포함시켜서 PR 같이 생성해서 머지 할게요~


Issue traker

투표 및 능력 상태 정보를 LeftSideContainer 컴포넌트에서 AbilityButtonList 로 이동
- React.memo 사용해서 최적화
- props를 통해 넘겨받는 함수를 useCallback 사용해서 최적화
@dailyco dailyco added ⚙️ Refactor 같은 기능 / 보기 좋은 코드 👶🏻 Frontend 프론트엔드(클라이언트) 작업 ⚡️ Performance 성능 개선 labels Dec 14, 2021
@dailyco dailyco added this to the Sprint 2021 milestone Dec 14, 2021
@dailyco dailyco self-assigned this Dec 14, 2021
@dailyco dailyco merged commit 0b6858a into dev Dec 14, 2021
dailyco added a commit that referenced this pull request Dec 15, 2021
* perf: 투표 및 능력 1단계 최적화

투표 및 능력 상태 정보를 LeftSideContainer 컴포넌트에서 AbilityButtonList 로 이동

* perf: 투표 및 능력 최적화 완료

- React.memo 사용해서 최적화
- props를 통해 넘겨받는 함수를 useCallback 사용해서 최적화

* fix: 마피아끼리 닉네임 빨강색 적용

* perf: 조건부 렌더링 HOC 패턴 생성 및 적용
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👶🏻 Frontend 프론트엔드(클라이언트) 작업 ⚡️ Performance 성능 개선 ⚙️ Refactor 같은 기능 / 보기 좋은 코드
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant