TIL-220603

React 첫주차 시작이다.
먼저 내가 사용할 기능은
다음하고 같다.

• React-redux
• React-router-dom
• typescript
• styled-components
• 디자인패턴 Container Presenter

React-redux

리덕스(Redux)는 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다.

React-router-dom

React Router는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리인 React를 위한 모든 기능을 갖춘 클라이언트 및 서버 측 라우팅 라이브러리입니다. React Router는 React가 실행되는 모든 곳에서 실행됩니다.

TypeScript

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다.

Styled-components

styled-components는 React 컴포넌트 시스템의 스타일링을 위해 CSS를 어떻게 향상시킬 수 있는지 궁금해한 결과입니다. 단일 사용 사례에 집중함으로써 우리는 개발자를 위한 경험과 최종 사용자를 위한 결과물을 최적화할 수 있었습니다.

디자인패턴 Container Presenter

먼저 Container - Presenter 패턴에 대해 간략하게 알아보자. 이름에서 볼 수 있듯이 두 개의 구조로 분리한다는 것을 알 수 있다. 각각의 역할은 다음과 같다.

• Container : 데이터를 처리하는 역할을 하며 API로 데이터를 불러오거나 Redux를 사용하여 dispatch를 사용하여 상태를 처리한다.
• Presenter : Container에서 처리한 상태를 props로 전달받아 상태를 화면에 출력하는 컴포넌트이다.

즉, 데이터 처리와 데이터 출력을 분리하여 코드를 작성하는 것이다. ### 내가 생각하는 Container Presenter 장/단점 장점

• 데이터처리와 화면출력의 분리로 가시성이 좋아짐

단점

• 데이터를 여러변 전달 해야하는 작업을 해줘야한다.

아토믹디자인패턴 의 장/단점

장점

• 재사용 가능한 설계 시스템을 제공
• 재사용의 효율을 높임
• 디자인을 쉽게 수정할 수 있습니다.
• 레이아웃을 이해하기 쉬어집니다.
• 페이지를 처음부터 설계하는 시도가 있어, 페이지의 레이아웃의 이해가 오래감

단점

• 오랜 기간의 디자인 설계
• depth가 깊은 폴더구조