Atomic 디자인

참고 링크

리액트 어플리케이션 구조 - 아토믹 디자인 Atomic Design Pattern이 뭐지? Atomic Design으로 todo 만들기

장점

재사용성이 높다.
컴포넌트 하나 하나에 책임을 실을 수 있다.

단점

파일이 많아진다.

Container-Presentational Components Pattern이 존재하지만, Hook의 발달로 지양하게 되었다. 그렇다고 아무런 구분 없이 하나의 폴더에 모든 컴포넌트를 담는 것은 난잡해보이고 정리가 안돼보인다.

때문에 Atomic 패턴을 학습하기로 하였다.

학습 중 고민사항

storybook을 사용하다 보니 데이터를 props로 넘겨주지 않으면 제대로 사용할 수가 없는 상황이 발생했다. 내부에서 recoil을 사용하는데 해당하는 상태값은 앱을 실행할 때 db에서 받아오기 때문에 데이터를 사용할 수 없는 상황이 생겼다. 그렇게 해서 학습을 하다보니 atom, molecule, organism, template에서는 데이터를 직접 받아와서 가공하여 사용하는 것이 아니라 실제로 보여지는 view만 담당해야 하고 props로 데이터가 넘어오면 해당하는 데이터에 대한 것만 렌더링 해주는 방식이 맞는 것 같다는 생각이 들었다. page에서 데이터를 받아와 가공하여 넘겨주고 아래로 내려가면서 template는 organism과 molecule, atom의 레이아웃을 잡아주고 organism은 molecule,atom의 레이아웃을 잡아주는 방식으로 데이터를 전달하며 내려가는 것이라는 생각이 들었다. 또한 구현 후 atom,molecule와 같은 것들은 각각이 직접 위치값이나 마진값을 잡아주지 않고 위에서 잡아줘야 하는데 직접 수정해 준 것 또한 잘못된 점이라고 생각이 들었다.