React에서 주로 어떤 패턴을 사용하시나요??

[qlalf9824]

지금 개발을 하면서 page, template 으로 뷰와 로직을 분리하고
뷰의 페이지 관련한 기능 template 안에 뷰에 필요한 컴포넌트 등을 넣고 있는데
고민이 되는 부분이 page가 로직을 전부 가지고 있다보니 페이지의 상태들이 변할 때마다 template이 리렌더링되고, page의 로직이 너무 커지고 복잡해지고 있다는 생각이 듭니다.

이럴 경우에는 컴포넌트에 최대한 로직을 넣어서 페이지의 로직을 간소화하고 memo를 통해 리렌더링이 적게 될 수 있도록 하는게 좋을까요??

아니면 사용하시는 다른 좋은 패턴이 있다면 알려주시면 감사하겠습니다.

[jungpaeng]

memo는 리렌더링을 줄이기 위한 용도로 사용하면 안 된다고 생각합니다. memo의 용도는 값을 메모이제이션을 함으로서 무거운 로직의 중복 실행을 막는 최적화 용도의 훅이며, 말 그대로 최적화의 용도로만 사용해야 합니다.

모든 곳에 memo를 붙이는 것은 리렌더링이 줄어들었다는 만족감을 줄 수 있지만, 정작 성능에 긍정적인 영향을 주지 못할 수 있습니다.

또한, page에 모든 로직을 작성하고 있다고 하셨는데 이게 만약 페이지 컴포넌트 안에서 사용되는 특정 컴포넌트의 로직까지 페이지에 작성하는 걸 말하시는 거라면 좋지 못한 방법입니다.
특정 컴포넌트에서 실행되는 로직은 그 컴포넌트 내에서 이뤄질 수 있도록 하면 페이지 컴포넌트의 로직은 점점 줄어들면서 자연스럽게 너무 커지고 복잡해지는 문제까지 해결될 것입니다.

[qlalf9824]

답변 감사합니다! 페이지와 관련된 모든 컴포넌트의 로직을 페이지 컴포넌트에 넣어서 작업했는데 컴포넌트 로직은 최대한 컴포넌트 내에서 실행되도록 설계 해보겠습니다!