더미데이터 만들기
React공부를 하고 혼자 실습을 할 때 데이터가 필요한 경우가 많다. 그럴경우를 대비해 더미데이터를 만드는 법을 알아보자.
- data.json 만들기
- 컴포넌트에서 import해서 사용하기
이 UserList 컴포넌트는 data.json에서 import한 데이터를 사용하여 각 사용자의 이름과 이메일을 리스트 아이템으로 렌더링한다.
위의 코드에서는 JavaScript 모듈 시스템의 import 기능을 사용하여 JSON 파일을 import하고 있다.
이렇게 하면 JSON 파일의 내용이 자동으로 JavaScript 객체로 변환되므로, React 컴포넌트에서 쉽게 사용할 수 있다.
이 방식은 JSON 파일이 프로젝트의 로컬 디렉토리에 있을 때 작동한다. 원격 서버에서 JSON 데이터를 가져와야 하는 경우에는 다른 방법을 사용해야 한다.
일반적으로는 fetch API 또는 axios와 같은 HTTP 클라이언트 라이브러리를 사용하여 원격 서버에서 데이터를 가져온다.
json-server
- json-server은 개발자가 간단한 REST API를 빠르게 프로토타이핑하고 테스트할 수 있도록 하는 간단한 서버이다.
- 단일 JSON파일을 사용하여 데이터를 저장하며, 이 JSON파일을 기반으로 CRUD기능을 제공하는 REST API를 자동으로 생성한다.
- npx json-server --watch "json파일명" --port 3001 명령어로 실행하며, 앱도 실행하고 json-server도 함께 실행해야한다.
read
- 컴포넌트가 마운트될 때 fetch()를 사용하여 JSON Server에서 todos를 가져온다.
create
- 사용자가 폼을 제출하면 fetch()를 사용하여 새 todo를 JSON Server에 추가한다.
update
- 사용자가 checkbox를 클릭하면 fetch()를 사용하여 todo의 completed 상태를 JSON Server에 업데이트한다.
delete
- 사용자가 "Delete" 버튼을 클릭하면 fetch()를 사용하여 todo를 JSON Server에서 삭제한다.
- return부분
useEffect
정의
- useEffect는 React의 Hook 중 하나로, 함수 컴포넌트 내에서 사이드 이펙트(side effects)를 수행할 수 있게 한다.
- 사이드 이펙트는 데이터를 가져오기, 구독 설정, 수동으로 React 컴포넌트의 DOM을 수정하는 등의 작업을 포함한다.
- useEffect는 두 개의 인자를 받는다. 첫 번째 인자는 사이드 이펙트를 수행하는 함수이고, 두 번째 인자는 의존성 배열(dependency array)이다.
언제 사용하는지
- useEffect는 주로 컴포넌트가 렌더링 된 후에 어떤 작업을 수행할 필요가 있을 때 사용한다.
- 예를 들면, 외부 데이터를 불러오거나 DOM의 특정 항목에 직접 변화를 줄 때 사용한다.
- 의존성 배열에 특정 값을 넣게 되면, 그 값이 변경될 때마다 side effect가 실행된다.
- 또한, 컴포넌트가 마운트 될 때 한 번만 실행하거나, 업데이트 될 때마다 실행하게도 할 수 있다.
다크모드가 보기 좋아요