JSON (JavaScript Object Notation)은 데이터를 표현하고 전송하기 위한 경량 데이터 교환 형식입니다. 자바스크립트에서는 JSON 데이터를 사용하여 동적으로 UI를 구성하는 것을 매우 간단하게 할 수 있습니다. 이 글에서는 자바스크립트에서 JSON 데이터를 읽고 파싱하여 UI를 동적으로 구성하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 읽기

먼저, 서버에서 JSON 데이터를 읽는 방법에 대해 알아보겠습니다. 자바스크립트에서는 XMLHttpRequest 객체나 fetch API를 사용하여 서버로부터 JSON 데이터를 요청하고 받아올 수 있습니다. 예를 들어, 다음과 같은 코드로 JSON 데이터를 읽어올 수 있습니다:

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터를 처리하는 코드 작성
  });

위 예제에서 fetch 함수는 data.json 파일을 요청하고, response.json() 메소드를 호출하여 JSON 데이터를 파싱한 후, data 변수에 할당합니다.

2. JSON 데이터 파싱

읽어온 JSON 데이터를 파싱하여 자바스크립트 객체로 변환해야 UI를 구성하는데 활용할 수 있습니다. 자바스크립트에서는 JSON.parse() 함수를 사용하여 JSON 문자열을 자바스크립트 객체로 변환할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 출력: John
console.log(obj.age); // 출력: 30
console.log(obj.city); // 출력: New York

JSON.parse() 함수는 JSON 문자열을 파싱하여 자바스크립트 객체로 변환해줍니다.

3. UI 구성하기

JSON 데이터를 파싱한 후, 얻은 자바스크립트 객체를 활용하여 동적으로 UI를 구성할 수 있습니다. 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해봅시다:

<ul id="users-list"></ul>

위 HTML에서 users-list라는 id를 가진 <ul> 요소는 동적으로 생성된 사용자 목록을 보여줄 것입니다. 이제 이 목록을 JSON 데이터를 활용하여 동적으로 생성하는 방법을 알아보겠습니다:

const jsonData = '[{"name": "John", "age": 30}, {"name": "Jane", "age": 25}]';
const usersList = document.getElementById('users-list');
const users = JSON.parse(jsonData);

users.forEach(user => {
  const listItem = document.createElement('li');
  listItem.textContent = `${user.name}, ${user.age}`;
  usersList.appendChild(listItem);
});

위 코드에서 jsonData 변수는 JSON 데이터를 나타내는 문자열입니다. JSON.parse() 함수를 사용하여 users라는 배열로 변환한 후, forEach 메소드를 사용하여 사용자 목록을 생성합니다. 각 사용자에 대해 <li> 요소를 동적으로 생성한 뒤, textContent를 설정하여 사용자의 이름과 나이를 표시합니다. 마지막으로, <li> 요소를 usersList에 추가합니다.

이런 식으로 JSON 데이터를 활용하여 동적으로 UI를 구성할 수 있습니다. JSON 데이터를 읽고 파싱하여 자바스크립트 객체로 변환한 후, 자바스크립트 객체를 사용하여 동적으로 UI를 생성하거나 업데이트할 수 있습니다. JSON을 활용하면 서버에서 클라이언트로 데이터를 전송하고, 클라이언트에서는 이 데이터를 동적으로 UI로 구성하는 것이 간편하게 가능해집니다.