Colin's Blog
Immer를 사용하여 소셜 미디어 피드 구현하기

Social Media Feed

소개

소셜 미디어 피드는 현대적인 애플리케이션에서 널리 사용되는 기능 중 하나입니다. 여러 사용자의 활동과 게시물을 피드로 보여주는 것은 사용자 경험을 향상시키며, 사용자가 소셜 미디어 플랫폼을 자주 사용할 수 있도록 도와줍니다.

이번 블로그 포스트에서는 JavaScript의 Immer라이브러리를 사용하여 소셜 미디어 피드를 구현하는 방법을 알아보겠습니다.

Immer란 무엇인가요?

Immer는 JavaScript의 불변성을 다루는 작업을 단순화하는 라이브러리입니다. 이 라이브러리를 사용하면 객체의 상태를 변경할 때 복사본을 만들 필요 없이 직접 수정할 수 있습니다. 이는 코드를 간결하게 만들고 성능 개선에도 도움이 됩니다.

소셜 미디어 피드 구현하기

  1. Immer 설치하기

먼저, 프로젝트에 Immer를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 Immer를 설치할 수 있습니다.

npm install immer
  1. 소셜 미디어 피드 상태 관리하기

우리는 Immer를 사용하여 피드의 상태를 관리할 것입니다. 먼저, Immer를 임포트하고 초기 피드 상태를 생성합니다.

import produce from 'immer';

const initialState = {
  posts: [],
  isLoading: false,
  error: null,
};

const reducer = (state = initialState, action) => {
  // 상태 업데이트를 Immer를 사용하여 처리하는 로직
}
  1. Immer를 사용한 상태 업데이트

이제 Immer를 사용하여 상태 업데이트 로직을 작성해보겠습니다.

const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {
    switch (action.type) {
      case "FETCH_POSTS_SUCCESS":
        draft.posts = action.payload;
        draft.isLoading = false;
        draft.error = null;
        break;
      case "FETCH_POSTS_LOADING":
        draft.isLoading = true;
        draft.error = null;
        break;
      case "FETCH_POSTS_ERROR":
        draft.isLoading = false;
        draft.error = action.payload;
        break;
      case "LIKE_POST":
        const { postId, userId } = action.payload;
        const post = draft.posts.find((post) => post.id === postId);
        post.likes.push(userId);
        break;
      // 추가적인 액션과 업데이트 로직
      default:
        break;
    }
  });
};
  1. React 컴포넌트에서 상태 업데이트하기

이제 React 컴포넌트에서 상태를 업데이트하는 방법을 알아보겠습니다.

import { useDispatch, useSelector } from 'react-redux';
import { likePost } from './actions';

const Feed = () => {
  const dispatch = useDispatch();
  const feed = useSelector((state) => state.feed);

  const handleLike = (postId, userId) => {
    dispatch(likePost(postId, userId));
  };

  return (
    <div>
      {feed.posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <button onClick={() => handleLike(post.id, userId)}>Like</button>
        </div>
      ))}
      {feed.isLoading && <p>Loading...</p>}
      {feed.error && <p>Error: {feed.error.message}</p>}
    </div>
  );
};

마무리

이제 Immer를 사용하여 소셜 미디어 피드를 구현하는 방법을 알아보았습니다. Immer는 불변성을 다루는 작업을 단순화하므로 코드를 더욱 간결하고 가독성있게 만들어줍니다.

소셜 미디어 피드의 상태 관리가 복잡해질수록 Immer를 사용하면 상태 업데이트 코드가 더욱 관리하기 쉬워집니다.

이런 방식으로 Immer를 사용하여 다양한 애플리케이션에서 상태를 관리할 수 있습니다.

© 2018 Colin. All rights reserved.