[React] Mutation: 데이터의 비밀 작업실 🛠️

Mutation 톺아보기! 🛠️

Mutation은 데이터의 상태를 바꾸는 작업을 의미합니다. 데이터베이스의 정보를 수정하거나 추가, 삭제하는 모든 행동이 여기에 속하죠. GraphQL, React Query 같은 곳에서도 mutation은 중요한 개념이에요. 오늘은 이 mutation이라는 앙증맞은 녀석을 파헤쳐 볼 거예요. 준비됐나요? 😄

---

🔍 Mutation이란?

Mutation은 데이터를 변경하기 위한 작업이에요.

여기서 변경이란:

• 새로운 데이터를 추가하기
• 기존 데이터를 수정하기
• 데이터를 삭제하기

일반적으로 REST API의 POST, PUT, DELETE와 대응되며, GraphQL에선 mutation이라는 키워드로 데이터를 다룹니다.

---

🌏 Mutation의 세계 탐험

RESTful API에서의 Mutation 🧩

REST API에서 mutation은 흔히 CRUD(Create, Read, Update, Delete) 작업 중 Create, Update, Delete에 해당해요.

 

예제: 사용자 추가

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Alice', age: 25 }),
});

 

예제: 사용자 정보 수정

fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ age: 26 }),
});

 

예제: 사용자 삭제

fetch('https://api.example.com/users/1', {
  method: 'DELETE',
});

 

GraphQL에서의 Mutation 🧩

GraphQL에서는 query는 데이터를 읽고, mutation은 데이터를 변경합니다.

 

예제: 사용자 추가

mutation {
  addUser(name: "Alice", age: 25) {
    id
    name
    age
  }
}

 

예제: 사용자 정보 수정

mutation {
  updateUser(id: 1, age: 26) {
    id
    name
    age
  }
}

 

예제: 사용자 삭제

mutation {
  deleteUser(id: 1) {
    success
  }
}

 

GraphQL에서는 mutation이 서버에서 상태를 변경하고, 변경된 데이터를 반환할 수도 있어요. (REST API와 다른 중요한 특징!)

---

💫 Mutation과 React Query: 데이터 변경의 연금술사

React Query에서 mutation은 서버 데이터를 변경하기 위한 도구예요.

예를 들어, 데이터를 추가, 수정, 삭제할 때 사용됩니다.

React Query로 Mutation 설정하기 🛠️

1️⃣ useMutation 훅 사용하기

React Query는 useMutation을 통해 mutation을 관리합니다.

import { useMutation } from 'react-query';
import axios from 'axios';

function addUser(userData) {
  return axios.post('/users', userData);
}

function App() {
  const mutation = useMutation(addUser);

  const handleAddUser = () => {
    mutation.mutate({ name: 'Alice', age: 25 });
  };

  return (
    <div>
      <button onClick={handleAddUser}>Add User</button>
      {mutation.isLoading && <p>Loading...</p>}
      {mutation.isError && <p>Error: {mutation.error.message}</p>}
      {mutation.isSuccess && <p>User added successfully!</p>}
    </div>
  );
}

 

2️⃣ onSuccess와 onError 처리

React Query는 mutation 결과를 기반으로 후속 작업을 처리할 수 있어요.

const mutation = useMutation(addUser, {
  onSuccess: () => {
    console.log('User added successfully!');
  },
  onError: (error) => {
    console.error('Error adding user:', error);
  },
});

---

🍍 Mutation의 장점

1. 명확한 작업 구분: 데이터를 수정하는 작업을 명확하게 구분해줍니다.
2. API 응답 처리: 서버의 응답에 따라 성공/실패를 효율적으로 관리할 수 있어요.
3. 재사용성: React Query, GraphQL 등의 툴을 사용하면, mutation 로직을 재사용할 수 있어요.

---

⚠️ Mutation 사용 시 주의점

1️⃣ 불변성 유지

상태 관리에서 데이터를 변경할 때는 원본을 수정하지 않고 새로운 객체를 만들어야 해요.

const newData = { ...data, age: 26 }; // 불변성 유지

 

2️⃣ 에러 핸들링

mutation은 실패할 수 있기 때문에, 적절한 에러 처리가 필요합니다.

 

3️⃣ 캐싱

데이터를 수정한 후에는 React Query 등의 캐시를 업데이트해 UI와 서버 상태를 동기화해야 해요.

---

💼 실무에서의 예제: 사용자 관리

아래 예제는 React Query와 useMutation을 사용해 사용자를 추가, 수정, 삭제하는 실무 예제입니다.

import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';

function App() {
  const queryClient = useQueryClient();
  
  const addUser = useMutation((newUser) => axios.post('/users', newUser), {
    onSuccess: () => {
      queryClient.invalidateQueries('users'); // 캐시 업데이트
    },
  });

  const deleteUser = useMutation((id) => axios.delete(`/users/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('users');
    },
  });

  const handleAddUser = () => {
    addUser.mutate({ name: 'Bob', age: 30 });
  };

  const handleDeleteUser = (id) => {
    deleteUser.mutate(id);
  };

  return (
    <div>
      <button onClick={handleAddUser}>Add User</button>
      <button onClick={() => handleDeleteUser(1)}>Delete User</button>
    </div>
  );
}

---

🔖 결론

 

Mutation은 서버 데이터와 UI를 동기화하는 데 필수적인 개념이에요.

GraphQL, React Query와 함께 사용하면 데이터 변경 작업을 더욱 강력하고 깔끔하게 처리할 수 있답니다.

 

🌷전설의 개발자가 되어봅시당!🌷