2022. 3. 24. 20:34ㆍFrontend
안녕하세요.
ITAM Game 프론트엔드 개발자로 입사해, 현재는 백엔드 개발팀에서 근무 중인
이성우 입니다 :)
프론트엔드 개발팀에 근무하며 있었던 일을 블로그를 통해 공유하고자 합니다.
오늘 공유드릴 부분은 React 로 진행 중인 프로젝트에서 사용되던 Atomic Design 패턴을 걷어낸 이유 입니다.
시작하기에 앞서, React 공식 블로그에서 찾아볼 수 있듯이 파일구조에 대해 너무 많은시간을 투자하지 말라고 권유하고 있습니다.
그러므로 해당 글은 어디까지나 주관이 많이 녹아있을 수 있는 부분 참고 부탁드립니다.
서론
Atomic Design 패턴은 웹 디자이너인 Brad Frost 의 Atomic Design 이론에 기반하여 나온 패턴 입니다.
화학에서 여러개의 원자(atom) 들이 뭉쳐져 분자(molecules) 가 되듯이,
아주 작은 단위로 작성된 React Component 들을 조합하고,
그것들을 다시 여러개로 조합하여 웹 페이지를
구성해 나가는 것을 말합니다.
이러한 Atomic Design 패턴은 파일 구조가 명확하지 않은 React 프로젝트에서
디렉토리 구조를 구분시켜주고 Component 재사용성을 높여주는 역할을 했습니다.
하지만, 너무 많은 props drilling 으로 인해 고민을 하게 되었습니다.
본론
아래 첨부한 예시 코드를 봐주세요.
코드 내용을 간략하게 설명하자면,
atom 으로는Button | Input | TextLabel 3가지의 컴포넌트가 존재합니다.
위 3가지 컴포넌트를 묶어서 FormField 컴포넌트를 구성했습니다.
마지막으로 FormField 컴포넌트 3개로 구성 된 Form 컴포넌트를 생성했습니다.
Form 컴포넌트를 보시면 폼 구성에 필요한 모든 상태 값들을 관리하고 있습니다.
이를 FormField 컴포넌트로 전달합니다.
FormField 컴포넌트는 Form 컴포넌트로 부터 받은 props 를 다시
atom 컴포넌트들에게 전달해 줍니다.
한개의 페이지에서 전달하는 컨텐츠가 많을수록 컴포넌트와 props 는 복잡해지는
이슈가 있었습니다.
결론
저희 팀은 props drilling 을 해결하고자 여러 고민을 했고, 다음과 같은 합의를 했습니다.
`우리는 사용자에게 비즈니스를 제공하는게 우선이다.
Atomic Design 패턴으로 컴포넌트 재사용은 높아졌으나,
너무나도 많은 props drilling 과 복잡한 상태관리로 인해 개발 시 피로도가 증가하게 되었다.
그러므로 atom 컴포넌트를 제외하고는
페이지 내부에서 사용되는 컴포넌트들은 재사용을 고려하지 말고 개발하자!`
현재 저희 React 프로젝트 구조는 다음과 같이 리팩토링 되었습니다.
next.js 와 같이 pages 를 구성한 뒤, feature 디렉토리에 페이지 별로
디렉토리를 구성했습니다.
feature 하위 디렉토리 구성은 components, containers, contexts, hooks 로 구성했으며
ContextAPI 를 사용하여 자유롭게 상태를 공유하도록 했습니다.
atom 컴포넌트 및 전역에서 공통으로 사용되는 모듈들은
@shared 디렉토리에 위치시켰습니다.
리팩토링을 진행하고 저희 프론트엔드팀은 잦은 요구사항 변경에도
유연하게 대처하고 프로덕트를 개발할 수 있었습니다.
많이 부족한 글이지만 시간내어 읽어주셔서 감사합니다.
좋은 의견이 있으면 댓글로 남겨주시면 감사하겠습니다.
추가로 저희 ITAM games 와 함께 성장해 나가실 개발자 분을 채용 중에 있으니
많은 관심 부탁드립니다 :)
참고