[React] 상수데이터와 목데이터

상수데이터

• 변하지 않는 데이터, 정적인 데이터
• UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성

상수데이터를 사용하는 이유

• 기존 하드 코딩으로 가독성이 좋지않고 수정시 유지보수가 힘듦
• 반복되는 UI를 상수데이터와 Array.ㅡmap()함수 조합을 이용해서 간결하게 표현할 수 있음
• 수정할 필요가 생겼을 경우, 상수데이터에 해당하는 부분의 내용만 변경해주면 되기에 유지보수 용이

상수 데이터 활용 예제

• JS파일로 분리하거나 파일 내부에서 선언하여 사용가능
• 대문자 + 스네이크 케이스 이용
• 별도의 JS파일 분리할 경우 export/import를 통해서 필요한 파일에서 사용
• js파일은 데이터를 import하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성
• 여러개의 파일에서 공통적으로 사용되는 경우 별도의 JS파일로 분리해서 사용하면 효율적이며, 해당파일에서만 사용하는 간단한 상수데이터의 경우에는 파일 내부에 선언
  상수데이터의 실제 사용활용
• 인스타그램 고객 후기

mock data

• 거짓된, 가짜의
• 가짜데이터, 샘플 데이터로 해석
• 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터

mock data 사용하는 이유

• 프론트엔드를 개발진행하려는데 백엔드 API가 완성이 안되었을 수도 있음
• 백엔드에서 API가 완성될때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 데이터에 맞게 UI가 의도한대로 구현되는지 먼저 확인
• 프론트엔드일 경우 백엔드API 유무와 상관없이 데이터를 예쁘게 보여주는것이 프론트엔드 개발자로서 책임감을 가져야함
• mock data를 만드는 과정에서 백엔드 API에서 보내주는 response가 어떤 형태인지, 키 값을 확인하고 미리 mock data와 백엔드 response의 형태를 맞춰보면서 개발을 진행한다면 추후 실제 API를 훨씬 수월하게 연결 할 수 있음

mock data 활용 예제

• mock data는 백엔드 API를 모방하기에 실제 백엔드 API에서 응답값의 형태인 json파일로 만들어 줘야함
• public>data>json파일 경로
• public폴더의 역할 : 실제 배포되는 폴더
  -jS에선 http요청을 보낼때는 fetch함수 사용
• fetch함수는 첫번째 인자로 http 요청을 보낼 API주소, 두번쨰 인자로 요청을 보낼떄의 옵션들을 객체형태로 받음
• json파일을 저장해 둔 주소를 API주소로, 데이터를 가져오기 위한 요청GET 메서드를 활용해 요청을 보냄
• 데이터를 요청하는 시점에서 특정해야하는데, useEffect 훅을 활용해 컴포넌트가 렌더링 된 이후 데이터를 요청. 요청이 성공적이르 완료되면 setCommentList 함수를 사용하여 commentLIst State를 응답 받은 값으로 바꿔줌