[프론트엔드 기본] payload란? 의미, 개념, 실무 사용 예시까지 완벽 정리

1. payload란?

payload = 전달하고자 하는 “순수 데이터”

 

프로그래밍, 특히 웹 개발에서 payload는
서버나 시스템이 실제로 처리해야 하는 핵심 데이터를 의미합니다.

 

• “부가 정보(header 등)”과 구별됨
• 네트워크 요청 시 body 부분의 데이터가 payload

쉽게 말해 '운송 트럭의 짐' = payload 트럭(header) + 짐(payload)

 

 

 

2. HTTP 통신에서의 payload

HTTP 요청에서 body 부분 = payload

 

✅ 예시

POST /api/user
Content-Type: application/json

{
  "name": "홍길동",
  "email": "test@example.com"
}

이 { "name": "홍길동", "email": "test@example.com" } 부분이 payload

 

 

3. 프론트엔드에서의 payload 사용 예시

3-1. API 요청(axios)

axios.post('/api/login', {
  email: 'test@example.com',
  password: 'password123'
});

email, password → 서버로 보내는 payload

 

3-2. Redux 액션에서 payload

Redux에서는 action 객체의 데이터를 보통 payload라고 부름

const action = {
  type: 'ADD_USER',
  payload: {
    id: 1,
    name: '홍길동'
  }
};

payload = 상태(state)를 변경하기 위한 핵심 데이터

 

 

3-3. React Query mutation에서 payload

const mutation = useMutation({
  mutationFn: (payload: User) => axios.post('/api/users', payload)
});

mutation.mutate({ name: '홍길동', age: 30 }); // 👈 이 객체가 payload

 

 

4. payload와 parameter의 차이

용어	의미
parameter	URL, QueryString, Path parameter
payload	body 데이터 (주로 POST, PUT에서 사용)

GET /api/users?limit=10    → limit=10 → parameter
POST /api/users { name: "홍길동" } → name → payload

 

5. 실무에서 payload 명명 규칙

 

• payload 자체는 특정 타입 or 데이터 구조를 의미
• 보통 action, request, mutation function에서 사용

type LoginPayload = {
  email: string;
  password: string;
};

 

const login = (payload: LoginPayload) => axios.post('/api/login', payload);

 

 

💡 요약

 

payload는 "내가 서버로 보내고 싶은 순수 데이터"를 의미합니다.

프론트엔드에서는
- API 요청 body
- Redux action data
- React Query mutation parameter

등에서 아주 흔하게 사용됩니다.

👉 실무에서는 `payload` = "데이터를 담아 전달하는 그릇" 이라고 이해하세요.