React Design patten

디자인 패턴

디자인 패턴은 프로그램 개발을 과정에서 사용 되는 설계 패턴들을 정의하는 것
현재는 화면 작업이 훨씬 복잡해졌고 react,vue 와 같은 개발 프레임워크를 활용하여
컴포넌트 단위로 쪼개서 웹 페이지를 개발 하고 있습니다.

디자인 패턴이 중요해진 이유는 웹 사이트의 구축이나 유지보수를 위해 컴포넌트 단위의 활용이 중요하게 됨

Ex) 기존 코드는 버튼을 컴포넌트 단위로 하지 않았다고 치면 페이지 마다 버튼 컴포넌트를 다시 만들어 줘야함 하지만 디자인 패턴을 통한 버튼을 컴포넌트로 만들고 하게 된다면 재사용성을 사용할 수 있음

Custom hooks(현재 회사에서 사용중)

1. 컴포넌트에서 비즈니스 로직을 hooks로 분리하여 관리하는 방법인데 hooks로 분리하는 경우 로직을 재사용이 가능 하다는 장점이 있다.
   1. Ex ) user -> hooks를 활용하면 다른 컴포넌트나 페이지에서 user의 로직을 활용이 가능하다
   2. 다만 단점으로는 전체적인 로직을 너무 많이 만들면 방대해진다는 단점이 있다.
   3. 로직이 렌더링과 분리되어 있어 작업이 편하다
   4. 컴포넌트의 제어가 쉬워지고 사용자가 더 많은 통제권을 가질 수 있음
   

Atomic 패턴

1. 컴포넌트의 재활용을 최대화 하기 위한 방법인데 개인적으로 그렇게 좋아하지 않는 방법이다.
   아토믹 자체가 뜻으로는 분자 라는 뜻인데 이 분자 자체가 작은 컴포넌트들로 이루어져 atoms(원자)-> molecules(분자) -> organisms(유가체) -> templates(템플릿) -> pages(페이지) 이렇게 복잡한 구조를 가지고 있기 때문에 잘 못 사용하게 되면 너무나 복잡한 구조와 방대한 컴포넌트가 생긴다

프레젠테이션 컨테이너 컴포넌트 패턴

1. 가장 기본적인 패턴 데이터나 로직을 수행하는 컨테이너 컴포넌트와 데이터를 출력해주는 프레젠테이션 컴포넌트를 분리하여 구현하는 디자인 패턴
2. Container 컴포넌트
   1. Api 호출하거나 state 관리 이벤트 처리 등의 작업을 수행
   2. 변경된 상태값을 props를 통해 presentation 컴포넌트로 전달
3. Presentation 컴포넌트
   1. UI를 표시하는 컴포넌트
   2. 직접 상태값을 관리하지 않고 Container 컴포넌트가 전달해준 props를 받아 출력