상수 데이터

• 변하지 않는 데이터로 정적인 데이터를 말한다.
• UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터
• 상수 데이터는 별도의 js파일로 분리하거나 파일 내부에서 선언하여 사용할 수 있다. (보통 데이터가 많거나 다른 파일에서도 공통적으로 사용하는 경우 js파일로 분리해주고 간단한 경우에는 파일 내에 상수 데이터를 정의해준다)
• 상수데이터는 대문자+snake case로 명명해주는 게 컨벤션이다.
• 보통 footer처럼 반복되는 ui면서 변하지 않는 값같은 경우 상수데이터를 사용한다.

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

• 반복되는 ui를 일일이 만들면 가독성이 좋지 않고 추후 유지보수가 힘들다
• 이런 반복되는 ui를 상수 데이터와 map 메소드의 조합으로 표현해 줄 수 있다.

목 데이터

• 실제 API가 아닌 프론트 개발자가 만든 샘플 데이터를 말한다.
• 목 데이터는 백엔드 API의 샘플 데이터이기 때문에 실제 응답값의 형태인 JSON 파일로 만들어 줘야 한다.
• 목 데이터의 경우 public 폴더에 만들어 준다.
• 우리가 CRA를 통해서 만든 프로젝트를 배포했을 때 실제 서버에 배포되는 폴더가 public 폴더이다.

목데이터를 사용하는 이유

• 프론트엔드 개발 중 API에서 불러오는 데이터가 필요하지만 아직 API가 개발 중인 경우가 있는데 이럴 때 목 데이터를 만들어 프론트엔드 개발자가 의도한 대로 기능이 구현되는지 확인 할 때 쓰이는 샘플 데이터가 목데이터이다.

• 백엔드 API의 response가 어떤 형태인지 key-value를 확인 후에 목 데이터를 만들어 개발을 진행한다면 나중에 백엔드와의 API 연결이 한결 수월해질 수 있다.

목 데이터 호출

• 자바스크립트에서 http 요청을 보낼 때는 fetch 함수를 사용한다.
• fetch 함수는 첫번째 인자로 http요청을 보낼 api주소 두 번째 인자는 요청을 보낼 때의 옵션들을 객체 형태로 받는다.
• fetch 의 디폴트 method는 GET이며 다른 method(POST,PATCH,PUT,DELETE)의 경우에는 작성해준다.

만들어준 목 데이터

목 데이터 활용

useEffect 훅을 활용하여 컴포넌트가 렌더링 된 이후 데이터 요청을 하였으며 랜더링 되더라도 계속해서 api가 호출되지 않도록 했다.

조건부 렌더링을 구현할 때 '삼항연산자' 혹은 '&& 연산자'를 사용할 수 있다. 조건이 true 일 때만 특정 ui를 렌더링 하고 싶다면 '&&연산자'를 true일 때 false일 때에 따라 각기 다른 ui를 렌더링 하고 싶다면 '삼항연산자'를 사용한다