개발자

React에서 디자인 패턴을 적용한 예시 코드가 있을까요

2022년 10월 26일조회 798

안녕하세요, 2년차 프론트엔드 개발자입니다. React나 Vue같은 FE Framework를 사용할 때 MVVM이라는 디자인 패턴을 주로 적용한다고는 알고있는데, 항상 검색해보면 실제 구현한 코드를 본 적이 한 번도 없어서 이 패턴이 요구하는 바를 정확히 이해하지 못하는 것 같습니다. 혹시 MVVM 패턴이나 그 외 패턴이더라도 React에서 특정 디자인 패턴을 적용한 사례(코드 레벨까지면 더 좋겠습니다)를 아시는 분께서는 링크를 공유해주시거나 따로 설명해주시면 정말 감사드리겠습니다!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

성원님의 프로필 사진

안녕하세요! 저는 실무에서 두 가지 패턴을 사용해봤는데요 1. Atomic-design 컴포넌트를 목적에 따라 화학적 단위로 쪼개고 각 컴포넌트를 조합하여 아키텍처를 구성합니다. - Atomic - Molecules - Organisms - Templates - Pages 코드 예시 https://github.com/danilowoz/react-atomic-design 2. Clean Architecture 외부에서 내부로 향하는 의존성 규칙을 지키고, 계층을 분리하여 유지보수하기 좋은 아키텍처를 구성합니다. 예를들어 Button이라는 UI 컴포넌트가 있을 때 버튼을 클릭하면 특정 데이터를 가져오는 시나리오에서 버튼은 특정 데이터를 가져오는 함수에 의존합니다 외부 -> 내부 UI (Button) -> fetch Controller -> fetch Use case -> Data Entities 코드 예시 https://github.com/falsy/react-with-clean-architecture/tree/master/src/domains 주변 프론트엔드 개발자분들이랑 대화해보면 Atomic-design 패턴을 프로젝트에 맞게 변형해서 많이 사용하는 것 같습니다:) *코드 예시로 첨부한 링크는 검색해서 발견한 레포지토리들입니다~

profile picture

익명

작성자

2022년 10월 28일

안녕하세요, 성원님! 덕분에 잘 읽어보았습니다. 이제 실제로 프로젝트에 적용하면서 배워가면 될 것 같습니다. 감사드립니다~

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!