세 단어는 이름이 비슷하지만 다루는 층이 다르다. 뮤테이션(mutation)은 데이터를 바꾸는 작업, 트랜잭션(transaction)은 여러 변경을 전부 반영하거나 전혀 반영하지 않게 묶는 단위, React의 트랜지션(transition)은 화면 업데이트의 우선순위를 낮추는 표시다.
| 용어 | 층 | 답하는 질문 |
|---|---|---|
| 뮤테이션 | 데이터(서버·객체) | 무엇을 바꾸나 |
| 트랜잭션 | 저장소(DB) | 여러 변경이 함께 성공·실패하나 |
| 트랜지션 | React 렌더링 | 어떤 화면 갱신을 먼저 처리하나 |
뮤테이션
- 서버 데이터 변경: 조회(query)와 짝을 이루는 생성·수정·삭제다. TanStack Query의
useMutation, SWR의useSWRMutation, GraphQL의mutation연산이 이 뜻이다. 성공한 뒤에는 관련 조회 캐시를 무효화하거나 직접 고친다 - 객체를 제자리에서 고치는 것:
position.x = 5처럼 객체 내용을 직접 바꾸는 것도 뮤테이션이다. React state를 이렇게 바꾸면 React가 변화를 알지 못하므로, 새 객체로 교체한다(React 상태 갱신, 구조적 공유)
트랜잭션
출금과 입금처럼 함께 성공하거나 함께 실패해야 하는 작업 묶음이다. DB가 ACID 성질로 보장한다. 스프링에서는 @Transactional로 경계를 긋는다.
뮤테이션 여러 개를 보낸다고 트랜잭션이 되지는 않는다. GraphQL은 한 요청 안의 최상위 mutation 필드를 순서대로 실행하지만, 뒤의 필드가 실패해도 앞에서 반영한 변경을 되돌리는 기본 수단은 없다. 원자성이 필요하면 서버의 한 트랜잭션 안에서 처리해야 한다.
트랜지션
useTransition의 startTransition으로 감싼 상태 업데이트는 "급하지 않음"으로 표시된다. 그 렌더가 진행되는 동안에도 타이핑 같은 급한 입력이 먼저 처리된다. startTransition에 넘기는 함수를 Action이라 부르고, React 19부터는 async 함수도 넘길 수 있다.
// 뮤테이션(서버 저장)을 트랜지션(Action) 안에서 실행하는 흔한 조합
startTransition(async () => {
setOptimisticLiked(true) // useOptimistic의 set 함수
await saveLike() // 서버 데이터를 바꾸는 뮤테이션
})useOptimistic의 set 함수는 Action 안에서 불러야 한다. 밖에서 부르면 경고가 나고, 임시 값이 잠깐 보였다가 바로 원래 값으로 돌아간다. 트랜지션이 Action이 끝날 때까지 임시 상태를 붙잡아 두는 구조이기 때문이다.
상태 기계(state machine)에서 idle → pending → success처럼 상태가 바뀌는 것도 영어로 transition(전이)이라 부른다. React의 트랜지션과는 다른 개념이다. React 트랜지션은 상태의 종류가 아니라 렌더링 우선순위를 다룬다.
출처: React — useTransition · React — useOptimistic · React 19 — Actions · React — Updating Objects in State: What's a mutation? · TanStack Query — Mutations · SWR — Mutation & Revalidation · GraphQL — Mutations