리팩토링(2)
-
[React CS] 디자인 패턴 2 - Custom hooks 패턴
안녕하세요. 디자인 패턴을 알아보는 시간을 가집니다. 지난시간에는 Presentation & Container 패턴을 알아가면서 예제로 적용 시켰습니다. 하지만 이 패턴은 1:1 = 로직 : 뷰 적용 방식으로 사용이 되는 형태로 구성 되어져 있으며 1개의 로직에서 여러개의 뷰를 활용하여 사용 하고 싶을 때 대비하여 적용을 시켜보고자 합니다. 이 것을 적용 시키는 패턴은 Custom Hooks 패턴이며, Custom Hooks 패턴의 대해서 대해서 알아봅니다. 먼저 리마인드로, Presentation & Container 패턴을 적용 전과 적용 후의 대해서 구조를 정리해봅니다. Presiontation Component - UI 컴포넌트만 구성, Conatiner Component - 로직 부분만 구성 이..
2023.11.13 -
[React CS] 디자인 패턴 1 - Presentation&Container 패턴
안녕하세요. 디자인 패턴을 알아보는 시간을 가집니다. 이번 시간에는 디자인 패턴을 사용하는 패턴 중 하나인 Presentation & Container 패턴의 대해서 알아봅니다. 보통 처음 시간에 배울 때 구조는 아래와 같은 구조로 사용하는데, function 컴포넌트 () { /* 로직 구현 */ return ( UI 출력 ) } 이런 구조를 이용하여 사용을 하게 되실겁니다. 하지만, 매번 사용하다가 조금 더 클린화 된 코드를 작성하고, 로직 컴포넌트와 View 컴포넌트로 나눠서 작성하는 것을 생각을 해낸 결과 디자인 패턴으로 쓰이는 Presentation & Container 디자인 패턴을 이용하여 사용 방법으로 활용하여 사용이 가능하다는 것을 알게 되었습니다. 따라서 Presentation & Co..
2023.11.07