JSON 파일이란 무엇인가?
JSON(JavaScript Object Notation)은 데이터를 구조화된 형태로 저장하고 전송하는 데 사용되는 경량의 데이터 형식입니다. 대부분의 웹 API에서 데이터를 교환할 때 JSON을 사용할 정도로 널리 활용됩니다. JSON은 사람이 읽고 쓸 수 있을 뿐만 아니라 기계가 해석하고 생성하기도 쉬운 형식입니다.
간단한 예시로, 사용자 정보를 담고 있는 JSON 파일은 다음과 같은 구조를 가질 수 있습니다.
React 프로젝트에 JSON 파일 포함시키기
React 애플리케이션에서 JSON 데이터를 사용하려면 먼저 프로젝트에 JSON 파일을 포함시켜야 합니다. 일반적으로 src 폴더 안에 data라는 폴더를 만들고 그 안에 JSON 파일을 추가합니다.
예를 들어, src/data/users.json 파일에 사용자 데이터를 저장할 수 있습니다.
JSON 데이터를 React 컴포넌트에서 읽기
JSON 파일을 포함했다면, 다양한 방법으로 데이터를 읽을 수 있습니다. 가장 간단한 방법은 JSON 파일을 직접 import하는 것입니다.
위 예제에서는 users.json을 import한 후, map 함수를 사용하여 각 사용자 정보를 화면에 렌더링합니다.
비동기적으로 JSON 데이터 가져오기
별도의 API 서버에서 JSON 데이터를 가져와야 하는 경우, 비동기 함수를 활용합니다. fetch API를 사용하면 간단하게 데이터를 가져올 수 있습니다.
이 방법은 외부 서버에서 데이터를 가져오는 경우 유용합니다.
JSON 데이터 활용하기
JSON 데이터를 읽어들인 후에는, 이 데이터를 다양한 방식으로 활용할 수 있습니다. 예를 들어, 사용자 목록을 필터링하거나 정렬할 수 있습니다.
사용자가 입력한 검색어에 따라 사용자 목록을 필터링하는 기능을 구현할 수 있습니다.
JSON 데이터 갱신과 저장
최종 단계로, 애플리케이션에서 JSON 데이터를 수정하고 저장할 수도 있습니다. 예를 들어, 사용자가 자신의 프로필을 업데이트할 수 있는 기능이 이에 해당합니다.
데이터를 서버로 보내는 방법으로는 POST 요청을 이용할 수 있습니다. 여기서는 axios와 같은 라이브러리를 사용하는 것이 좋습니다.