3주차 - 주특기, level 1/2/3

Fact

• React - redux styled-components react-portal

Level1 🔗

• Level1은 useState와 Props만을 이용했기에, 간단하게 구현함
  • props전달에 의한 re-render를 최소화하기 위해, useCallback과 React.memo를 활용하여 부모 컴포넌트의 변경에 따른 자식 컴포넌트의 re-render를 방지했다.
  • TodoCard에 전달되는 onToggleTodo, onDeleteTodo함수를 useCallback으로 메모이제이션하고, React.memo(TodoCard)로 감싸주었다.

Level2 🔗

• Level2 - redux을 이용한 todo list

  • Ducks패턴을 이용한 redux 함수 작성

  • atomic패턴을 이용한 폴더구조 활용

    📦src
    ┣ 📂components
    ┃ ┣ 📂atom
    ┃ ┃ ┣ 📜Button.tsx
    ┃ ┃ ┗ 📜Layout.tsx
    ┃ ┣ 📂molecules
    ┃ ┃ ┗ 📜TodoCard.tsx
    ┃ ┣ 📂pages
    ┃ ┃ ┣ 📜DetailPage.tsx
    ┃ ┃ ┗ 📜MainPage.tsx
    ┃ ┗ 📂template
    ┃ ┃ ┗ 📂TodoForm
    ┃ ┃ ┃ ┣ 📜TodoForm.tsx
    ┃ ┃ ┃ ┗ 📜index.ts

Level3 🔗

• styled-components를 이용한 Input, Button, Modal, Select컴포넌트 구현

  • atomic패턴의 컴포넌트 설계

  • S-Dot, $prefix를 통한 styled-component 설계

    📦src
    ┣ 📂assets
    ┣ 📂components
    ┃ ┣ 📂atom
    ┃ ┣ 📂molecules
    ┃ ┗ 📂template
    ┣ 📂styles
    ┃ ┣ 📜button.style.ts
    ┃ ┣ 📜index.style.ts
    ┃ ┣ 📜input.style.ts
    ┃ ┣ 📜row.style.ts
    ┃ ┗ 📜select.style.ts
    ┣ 📂util

    

    

    

Finding

• Ducks패턴을 통한, 코드의 관심사 집중방법
• Atomic패턴을 통한, 컴포넌트 재사용 방법
• styled-component의 Props를 통한 컴포넌트 재사용 방법

Feeling & Future

• Ducks, Atomic 패턴의 적용으로 코드의 규칙성을 부여하여, 코드가 급격하게 복잡해지는 문제를 방지할 수 있어, 디자인 패턴의 중요성을 깨닫게 되었다.
• styled-component로 Designed컴포넌트를 재사용하기 좋았다.
  • tailwind로 Designed컴포넌트를 공통화할 경우, props 전달로 인해 조합 사용이 좋지 못했다. 🔗
• 다양한 디자인 패턴을 알고 많은 라이브러리를 사용해보고 장단점을 알고 있는 것이, 앞으로 프로젝트 상황에 적합한 기술/패턴을 도입하는 데 유용할 것 같다.