글

라벨이 pattern인 게시물 표시

react component 반복되는 패턴을 최적화

 ## react component 반복되는 패턴을 최적화 같은 구성이 반복된다면 여러 방법으로 최적화를 고려할 수 있습니다. 주요 목적은 코드의 중복을 줄이고, 확장성과 유지 보수성을 향상시키는 것입니다. 1. **컴포넌트 팩토리 생성**:    - 컴포넌트를 동적으로 생성하는 함수나 클래스를 만듭니다. 이를 통해 `props`를 기반으로 필요한 컴포넌트를 반환하도록 설계할 수 있습니다. 2. **Higher Order Component (HOC)**:    - HOC는 컴포넌트를 받아서 새로운 컴포넌트를 반환하는 함수입니다. 이를 통해 공통적인 로직을 재사용할 수 있습니다. 3. **Hooks 사용**:    - React의 `useEffect`, `useState`와 같은 기본 Hooks 또는 커스텀 Hooks를 사용하여 반복되는 로직을 분리하고 재사용할 수 있습니다. 4. **Context API 활용**:    - React의 Context API를 사용하면 컴포넌트 트리 전체에서 데이터를 쉽게 전달하고 접근할 수 있습니다. 이를 통해 매번 `props`를 통해 데이터를 전달하는 대신, 필요한 컴포넌트에서 데이터를 직접 읽어올 수 있습니다. 5. **컴포넌트 분리 및 모듈화**:    - 재사용 가능한 작은 컴포넌트로 분리합니다. 각 컴포넌트가 하나의 역할만 수행하도록 설계하면, 코드의 중복성을 줄이고 가독성을 향상시킬 수 있습니다. 6. **메모이제이션**:    - `React.memo` 또는 `useMemo`를 사용하여 컴포넌트의 불필요한 렌더링을 방지합니다. 이는 특히 성능 최적화에 유용합니다. 구체적인 최적화 방안은 해당 코드나 구조의 세부 사항에 따라 달라질 수 있습니다. 위의 방법들 중 일부 또는 복합적으로 사용하여 반복되는 패턴을 최적화하면 좋습니다. 컴포넌트 팩토리(Component Factory)는 React 자체의 공식...

early return 패턴

 대충 설명: if ~~ else if ~~elseif ~~else 같이 분기처리 없이 if return if return 으로 하는 방식. 상황에 따라 가독성이 좋아질 수 있다. 순서를 고려해야.. 근데 잘 안쓴다고 한다(?) 읽은 링크 https://jheloper.github.io/2019/06/write-early-return-code/