JSON이 뭐고, React에서는 왜 자꾸 쓰는 걸까?

 

 

React를 공부하다 보면 fetch로 JSON 데이터를 가져온다, props로 JSON 넘긴다 이런 말들을 자주 보게 됩니다.
처음엔 “그 JSON이라는 게 도대체 뭐지?” 하고 막막하셨을 거예요.
이번 포스팅에서는 JSON이 뭔지, 왜 React에서 자주 쓰이는지, 그리고 실제로 어떻게 사용하는지 예제를 통해 하나씩 살펴보겠습니다.

---

✅ JSON이란?

**JSON(JavaScript Object Notation)**은 데이터를 주고받을 때 사용하는 가벼운 텍스트 형식입니다.
간단하게 말하면, 정보를 담기 위한 약속된 문장 구조예요.

{
  "name": "홍길동",
  "age": 28,
  "isStudent": false
}

 

위처럼 중괄호 {} 안에 "key": value 쌍으로 이루어진 데이터 구조를 JSON이라고 합니다.

---

✅ JSON과 JavaScript 객체는 뭐가 달라요?

둘은 정말 닮았지만, JSON은 문자열로 표현되는 데이터 구조라는 차이가 있어요.
자바스크립트 객체는 실제 코드로 쓰는 것이고, JSON은 주고받는 "데이터 그 자체"예요.

// JavaScript 객체
const user = {
  name: "홍길동",
  age: 28,
  isStudent: false
};

// JSON (문자열 형태)
{
  "name": "홍길동",
  "age": 28,
  "isStudent": false
}

---

✅ React에서 JSON은 언제 쓰나요?

React에서는 다음과 같은 상황에서 JSON을 자주 사용합니다:

1. 외부 API로부터 데이터 가져올 때

React에서 fetch() 함수를 사용해 외부 서버와 통신할 때, 대부분의 응답은 JSON으로 옵니다.

useEffect(() => {
  fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(data => {
      console.log(data); // 여기서 data는 JSON을 파싱한 JS 객체예요
    });
}, []);

2. 컴포넌트에 props로 데이터 전달할 때

props로 넘기는 정보도 결국 JSON 형식의 데이터로 주고받게 돼요.

const user = { name: "길동", age: 28 };

<UserCard info={user} />

3. JSON 파일을 로컬에서 불러와서 테스트할 때

import userData from './data/user.json';

console.log(userData.name); // "홍길동"

---

✅ JSON을 문자열로 바꾸거나, 다시 객체로 바꾸려면?

React에서도 JSON을 문자열 ↔ 객체로 자주 변환하게 됩니다.

목적	함수	설명
객체 → JSON 문자열	JSON.stringify()	서버에 보낼 때
JSON 문자열 → 객체	JSON.parse()	받아온 데이터 사용할 때

const obj = { title: "React" };
const json = JSON.stringify(obj); // "{"title":"React"}"

const parsed = JSON.parse(json); // { title: "React" }

---

🧠 마무리 요약

• JSON은 데이터 구조를 표현하는 문자열 형식입니다.
• React에서는 데이터 통신, props 전달, 파일 읽기 등에 자주 사용됩니다.
• 자바스크립트 객체와 유사하지만, 문자열 기반이라 네트워크 전송에 유리합니다.
• .stringify()와 .parse()로 자유롭게 변환할 수 있습니다.