대충 구글링에서 디자인패턴을 몇개 나열해보면 요정도있는것같다.
-
컴파운드 컴포넌트
-props drilling 해결, 커스터마이징 쉬워지며 가독성 좋아지는 디자인 패턴,
진짜 코드가 이뻐지는 것같아 개인적으로 마음에 든다. 구현 시 context 함수를 함께 사용하는 것이 권장된다.compound 설명글
https://www.smashingmagazine.com/2021/08/compound-components-react/토스에서 올린 영상중에 Funnel이라는 커스텀훅 라이브러리를 만드는 과정을 보여주는데 이때 compound 패턴이 야무지게 사용이 되더라, 영상을 보며 참고해볼만 하다:
관련 영상 링크: https://youtu.be/NwLWX2RNVcw?si=PhFYXUDQ6IUZ6BiC -
렌더 프롭스 패턴
-data array를 매핑할때 사용하는 디자인 패턴, 충분히 활용해볼만하다 워낙에 데이터 array를 컴포넌트로 map할일이 많다보니. -
presentational and container 패턴
-디자인 패턴 제작자가 이제는 비추천함, deprecated -
VAC 패턴
-3번 패턴의 유형중의 하나 -
BLoC 패턴
-Flutter에서 고안된 패턴 -
아토믹 디자인 패턴
-페이지를 잔뜩 쪼갬, 쪼개는 단계가 5단계 존재하나 알아서 단계 조절가능, 내용물( 비즈니스 로직 )과 껍데기( UI 컴포넌트 )를 분리하고 상태주입을 위한 컴포넌트를 이용해서 주입함, 재사용성 극대화되는 디자인 패턴이므로 대형 프로젝트, 대형 조직, 회사에서 사용함, 전체적인 설계를 잘할 필요가 있어 소규모 프로젝트에서는 재사용할일 많지않는 이상은 선택사항. 대규모 플젝에서는 거의 필수가 아닐까 싶기도하고 (개인적 의견) -
커스텀 훅 패턴
-로직을 커스텀훅으로 분리하여 외부로 로직 위임 가능, 요즘 가장 많이 쓰는 패턴이지 않나 싶다. -
제어 Props 패턴
-외부 컴포넌트로 제어권을 props로 부여하는 로직인데 custom hook으로 묶지 않아도 될만한 간단한 로직의 경우에는 사용해볼법 하지만 로직이 조금 복잡해진다면 7 커스텀 훅을 이용하는게 나을수도 있다. -
Props Getter 패턴
-커스텀 훅 속에 props들을 구현하여 외부 컴포넌트에서는 props의 getter로만 접근할수있다. 이를 통해 추상성이 좋아져 개발 복잡도를 숨길수있고, 이 props를 덮어 씌울수도 있다. 개인적으로는 덮어씌우고 이런 형태가 조금 난잡하다 느껴지기도 하고 굳이 이렇게까지 추상화할필요가 있을까 라는 생각이 들어 아직 사용해볼생각은 들지는않는다. -
State Reducer 패턴
-reducer를 이용하여 외부 컴포넌트의 매우 강력한 제어권을 줄수있다. reducer의 사용이유와 사용법을 알고있어야 코드를 이해할수 있다. (당연히 reducer를 쓰는게 메인이니) 개인적으로는 가독성도 오히려 떨어지는 느낌이 들고 구현도 어려운 느낌이라 사용하기 꺼려진다. (개인적인 의견이며 reducer는 개발자에 따라 호불호가 나뉘긴하더라)
이외에도 더 있을지도 모르지만 우선 많은 사람들이 이야기하는 것은 요정도 아닐까싶다. 이 10가지 패턴 중 하나만 고르는 것이 아닌 본인 선택에 따라 3,4,5개를 함께 사용할 때도 있고 하나만 쓸수도 있으며, 뭐 이 10개를 제외한 다른 디자인 패턴이나 자신만의 패턴을 활용하는 조직, 사람들도 있을것이다.
각 디자인 사용법은 본인이 추가로 검색하거나 아래 링크를 참고하면될것같다.
리액트 디자인 패턴 5개 번역한 글
https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80#compound-components-pattern
2개 패턴에 대해 자세히 설명해주신 글
https://namunamu1105.medium.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-2%EA%B0%80%EC%A7%80-4917ee8c8690
4개 장단점
https://velog.io/@aborile/React-Design-Pattern#vac-pattern
전체적인 리액트 아키텍쳐에 관하여
https://www.stevy.dev/react-design-guide/
참고기
https://kyung-a.tistory.com/35
presentational and container 패턴 관련 글
https://tecoble.techcourse.co.kr/post/2021-04-26-presentational-and-container/
파일구조 정리
https://isa-dev.tistory.com/9
어쨋든 중요한 사실만 알아보자
1. 재사용성
2. ui와 비즈니스 로직의 분리
3. 확장성
4. 컴포넌트의 사용 난이도
요정도에 따라 패턴이 나뉜다고 보면 되는데 이러한 4가지 중 어느 하나를 극대화 시키는 방법도 있을 것이고 1,2,3을 모두 챙기지만 4 즉 사용 난이도가 높아져버리는 패턴도 있다.
결국 내가 생각하기에는 리액트 디자인 패턴, 이를 포함하여 프론트엔드 디자인 패턴에는 완벽한 정답이 없다고 생각한다. 자기가 생각하기에, 그리고 자기 조직이 생각하기에 옳다고 생각하는 방향으로 구성되는 패턴을 따라가면 된다.
그리고 이러한 패턴을 지속적으로 수정해나가는 과정 역시 필요할것이다. 지금은 옳고 정답같아보이는 현재 패턴도 이후에 사용해나가다 보면 불편하고 마음에 들지않는 점이 하나 둘 생길테니 말이다.
백엔드의 경우에는 많은 사람들이 정론으로 생각하는 MVC 패턴이 있고 이를 대부분의 사람들이 따른다. 물론 이를 응용하여 만든 여러 패턴역시 존재하고 이외의 패턴들도 존재하기 때문에 결국 백엔드 역시도 완전한 정답은 없다.
개발은 불완전한 사람이 소프트웨어 제품을 만들어나가는 과정이기 때문에 완벽한 정답이 없는게 아닌가 싶다.
그래도 이러한 패턴들을 알아두고 이를 이용하여 자신만의 , 자신의 조직만의 패턴을 만들고 지속적으로 수정해나갈 필요가 있다. 그러니 공부하자. 패턴들. ( 솔직히 디자인 패턴을 공부하는것은 머리 아프고 굳이 필요한가 싶기도 하지만 이러한 것들 하나하나가 어떠한 기술에서의 주니어와 시니어를 나누는 기준이 아닐까 싶다)
마지막으로 필자는 위의 패턴중 1,2,6,7,8 정도를 상황에 맞게 적용해보려한다. 아토믹 디자인 패턴은 선택적으로 재사용 많은 ui에 한하여 적용해볼 예정이며 컴파운드와 패턴을 적극 적용해보고,커스텀훅 패턴은 재사용이 많거나 복잡한 로직에 한하여 적용하고 간단한 로직은 제어 props로서 적용하며, 랜더 프롭스 패턴의 경우에는 map을 사용하는 부분에 한하여 선택적으로 적용해볼까한다.
사용해보고 후기 남겨보도록 하겠습니다.
게시글 읽어주셔서 감사합니다. 잘못된 부분이나, 추가 수정해야할 부분이 있으면 댓글로 알려주세요. 바로 반영하도록 하겠습니다.
