[2주차 생각 과제] React 프로젝트의 폴더구조는 어떻게 설계하는것이 좋을까? #6
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
simeunseo
reviewed
Apr 27, 2023
| 3) Atomic | ||
| Atomic 패턴은 가장 작은 컴포넌트 단위를 원자로 설정하고, 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다. 이를 통해 UI 의 재사용성을 극대화하고, 유지 보수성을 높일 수 있다. | ||
| - - - | ||
| 위와 같이 세 가지 패턴에 대해 조사해 본 결과, 특별히 UI 가 복잡하거나 데이터 로직이 복잡하지 않다면, 일반적으로 많이 사용하는 Presentation Component - Container Component 패턴을 사용하면 좋을 것 같다. 여기서 만약 데이터 로직이 복잡하다면 Custom hook 패턴을 사용하고, UI 가 복잡하다면 Atomic 패턴을 추가적으로 사용할 수 있을 것 같다. |
There was a problem hiding this comment.
오오!!! 언제 어떤걸 써야할지에 대한 명확한 구분 좋다!
| - - - | ||
| 프론트엔드에게 디자인 패턴이란? | ||
| 프론트엔드에게 디자인 패턴을 잘 선택한다는 것은, 유지 보수성이 좋고 재사용성이 높은 코드를 작성하느냐 그렇지 못하느냐를 결정하는 중요한 문제인 것 같다. | ||
| 먼저 디자인 패턴에 대해 알아보면서 온사이즈에서 개발을 할 때 전체적인 구조에 대한 생각이 없이 개발했던 것에 대한 반성을 했던 것 같다. 온사이즈는 기본적으로 Presentation Component - Container Component 를 사용하고, 토스트나 모달같이 글로벌하게 사용되는 요소에 대해서는 Custom Hook 을 사용했었다. 토스트를 구현하면서 처음으로 Custom Hook 을 써 봤는데, 로직을 공유하면서 좀 더 선언적으로 코드를 짤 수 있어 좋았던 기억이 있다. 여기서 좋다의 의미는 첫번째로, 코드의 절대적인 양이 줄었다는 것, 두번째로 보수할 일이 생겼을 때, 수정해야 하는 코드의 양과 범위가 줄었다는 것, 세 번째로 별도의 파일로 커스텀 훅을 관리함으로써 코드의 위치를 직관적으로 파악할 수 있다는 것으로 나눌 수 있다. 만약 커스텀 훅 패턴을 미리 알고 있어서, 토스트나 모달 뿐 아니라 사이즈 로직도 공통으로 관리할 수 있었으면 더 좋았을 텐데하는 아쉬움이 남는다. |
There was a problem hiding this comment.
그래도 목적에 따라 다른 패턴을 사용했다는 점 멋진데?!
kwonET
reviewed
Apr 28, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ 구현 기능 명세
🌼 PR Point
리액트의 디자인 패턴에 대해 공부할 수 있어서 좋았어요!!! 지난 앱잼에서 했던 방식들에 대해 재고해 보며 반성과 성장의 시간을 가질 수 있었습니다 :)
🥺 소요 시간, 어려웠던 점
1h🌈 구현 결과물