[56일차]Optimistic Updates, Styled Components 고급 활용

낙관적 업데이트 (Optimistic Updates)

낙관적 업데이트는 사용자 인터페이스(UI)를 업데이트할 때 서버로부터 성공 응답을 받기 전에 해당 작업이 성공할 것이라고 가정하고 화면에 변경된 결과를 먼저 보여주는 기법이다. 이는 '단순한 결과를 당연히 성공할 것이라고 생각해서 결과를 미리 보여주는 것'을 의미한다.

목적: 사용자의 지연 시간(latency) 인식을 최소화하여 애플리케이션의 반응성과 사용자 경험(UX)을 극대화하는 것이 목적이다.

활용처: '좋아요' 버튼 클릭, 장바구니에 항목 추가, 체크박스 토글 등 성공 확률이 매우 높고 즉각적인 피드백이 요구되는 곳에 효과적으로 사용된다.

작동 방식:

• 사용자가 액션을 취하면 클라이언트는 서버에 요청을 보내는 동시에 로컬 상태를 즉시 업데이트하여 UI를 변경한다.
• 서버 요청이 성공하면 UI 상태는 유지된다.
• 서버 요청이 실패하면 클라이언트는 UI 상태를 이전 상태로 롤백하고 사용자에게 오류 메시지를 표시한다.

Tip: 컴포넌트 분리
컴포넌트 분리는 재사용성, 가독성, 유지보수성을 높이는 프론트엔드 개발의 핵심 원칙이다.

• 가장 간단한 기준은 여러 곳에서 중복되어 렌더링되는 부분(중복된 tsx 코드 블록)을 독립된 컴포넌트로 작성하는 것이다.
• 컴포넌트를 만든 후에는 외부에서 속성(props)을 통해 컨트롤할 수 있도록 설계함으로써 컴포넌트의 유연성과 재사용성을 확보할 수 있다.

Styled Components 고급 활용

Styled-components는 스타일을 컴포넌트에 직접 연결하는 방식을 제공하는 라이브러리이다. 이 라이브러리의 styled() 헬퍼 함수는 HTML 태그뿐만 아니라 이미 작성된 React 컴포넌트도 확장할 수 있다.

구조 확장(Extending Styles): styled(컴포넌트) 문법은 기존 컴포넌트의 스타일을 상속하거나 확장하는데 사용된다. 이는 기존 컴포넌트의 모든 로직과 기능을 유지한 상태에서 새로운 스타일을 덮어씌우거나 추가한다.

작동 원리

예시 코드 1: 기존 Button 컴포넌트를 확장하는 방식(TypeScript)

import Button from './common/Button.tsx';

// 기존 Button 컴포넌트의 스타일을 상속하고 새로운 스타일을 추가
const LikeButtonStyle = styled(Button)` 
  background-color: #ff6347;
  color: white;
  border-radius: 8px;
`;

const LikeButton = () => {
  return (
    <LikeButtonStyle> 
      ...
    </LikeButtonStyle>
  );
};

LikeButtonStyle은 렌더링 시 내부적으로 Button 컴포넌트를 다시 렌더링하며, LikeButtonStyle에 정의된 스타일이 Button에 적용된 스타일보다 우선 적용된다.

예시 코드 2: 스타일 적용 방식에 대한 설명

import Button from './common/Button.tsx';

const LikeButton = () => {
  return (
    // 최종적으로 렌더링되는 것은 Button 컴포넌트이며,
    // LikeButtonStyle에 정의된 스타일이 적용됨
    <Button className="LikeButtonStyle-generated-class"> 
      ...
    </Button>
  );
};

결론: styled(Button) 문법은 기존 컴포넌트를 새로운 스타일의 컴포넌트로 쉽게 변환하고 재사용 가능하게 만든다. 이것은 기존 스타일을 확장하거나 새로 정의된 스타일을 적용하는데 매우 효과적인 방법이다.