TIL_46_with Wecode 036 Mock data 활용법

poohv7·2021년 3월 12일
0
post-thumbnail

Mock data?

  • 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터
  • mock data 를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI 가 기획에 맞게 구현 되는지 확인
  • Backend 와의 소통 - 주고 받는 데이터가 어떤 형태인지, key-value 값 조정

본죽 홈페이지를 참고하여, 목데이타 활용과 맵 함수를 통해 배열 안의 객체를 나열하고, 하나의 컴퍼넌트를 활용하여 어떻게 좀 더 편리하게 우리가 페이지를 구성할 수 있는지 알아보자 👀


페이지의 구성을 살펴보면, 죽의 이미지와 그 아래 이름과 가격, 그리고 이미지에 NEW태그를 확인할 수 있다. 이미지와 이름, 가격과 태그는 각 각 다르지만, 구성은 똑같이 규칙적으로 나열되어있음을 확인할 수 있다. 그러면 우리는 하나의 구조를 만들고 컴퍼넌트화 하여 어떻게 더 간편하게 이용할 수 있을지를 고민해볼 수 있다.

일단 목데이타 환경을 먼저 세팅해보도록 하겠다.

_publick 폴더에 data 폴더, 그 안에 ProductListData.**json ** 파일을 만들어주었다. _

배열 안에 객체를 총 4개 만들어주었다. 객체 안에 각각의 키와 값을 지정해주었다. json 파일이기 때문에 키를 ""로 감싸줘야 한다. NEW 태그와 BEST 태그를 불리안 값을 통해 구분해보도록 하겠다.

위 방법은 실제 API 에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법이다.

이제 fetch 함수를 사용해 데이터를 어떻게 받아오는지를 알아보자.


fetch 함수를 통해 데이터를 가져왔음을 확인할 수 있다. fetch 함수에 대한 자세한 내용은 로그인/회원가입 포스트에서 추가적으로 내용을 정리해보겠따.

여기서 잠깐, componentDidMount..?
우리가 값을 호출해서 state에 저장하면 계속해서 render가 작동되게 된다. 최초에 한 번만 작동하게 하기 위해서 componentDidMount를 쓰는 것이다.

그럼 왜 render 위에 fetch 함수를 쓰는 걸까?
constructor는 생성자 함수이다. 생성해야하는 모든 조건을 이 함수에 작성함으로써 설계가 된다. render() 를 하기 전에 우린 state를 작성하고 componentDidMount 함수를 통해 같은 값이 반복되지 않도록 한다. 그래서, constructor() -> componentDidMount() -> render() 순으로 적으면, 이 곳에서 데이터 로딩을 처리한다는 일종의 약속 같은 것이라고 한다.
컴퍼넌트 생명주기

콘솔에 res 를 찍어보겠다.


데이타 제이슨에 담긴 배열이 그대로 전달되었음을 확인할 수 있다.

이렇게 목데이타를 활용하는 법을 보았다. 이제 어떻게 컴퍼넌트화 하여 맵 함수를 활용할 수 있는지를 봐보자.


일단 컴퍼넌트로 쓸 Product 파일을 하나 추가해주었다. 우리가 바꿔줘야할 내용들 이미지, 이름, 가격 등을 일단 지정해준다. 그리고 다시 ProductList 파일을 이동해보자.


위에서 만든 컴퍼넌트 <Product/>를 불러왔고 우리는 맵 함수를 통해 객체안에 지정한 값이 들어가고 새로운 배열로 나올 수 있게 만들 것이다. 이제 props도 만들었다. 이 props를 Product 파일에서 불러보겠다.

콘솔을 확인해보니, 배열안의 객체들이 잘 전달되었음을 확인할 수 있다. 비구조화 할당을 통해 간단하게 바꿔주었다.

자 이제 NEW 태그와 BEST 태그를 이미지에 어떤 방법으로 보이게 할지를 알아보자.


<Product /> 컴퍼넌트 안에 isNew 객체와 isBest 객체를 추가해주었다. 이 props를 자식 파일인 Product 파일에 전달해주자.


img 태그와 <p>{name}</p> 태그 사이에 isNew가 true 라면, New. isBest가 true라면, Best. 라는 조건문을 작성해주었다. 그리고 scss를 통해서 스타일을 지정해주면...

여기서 잠깐,
(조건식)?(참표현식):(거짓표현식) -> 삼항연산자

(조건식)&&(참표현식)
(조건식)||(거짓표현식)
위와 같은 짧은 조건문 문법이 있다는 것 기억해두자.


이렇게 완성된 페이지를 확인할 수 있다.

0개의 댓글