반복되는 컴포넌트를 목데이터(가짜데이터)로 이용해서 재사용이 가능하고,
백엔드 API를 기다리는게 아닌 먼저 기획에 맞게 구현되는지 확인이 가능하다
이제 프로젝트 시작하면 백엔드랑 소통도 더 잘 되겠다
- js방식으로 배열 데이터를 변수에 담고, import해서 접근이 가능하다
- 실제 API에서 보내주는 데이터 형식에 맞게 fetch함수를 이용해 접근이 가능하다
먼저 백엔드에서 넘어오는 api가 없기 때문에 우리가 먼저 목데이터를 활용해야 한다.
json파일에 목데이터를 만들어보자 !
Json파일
[ { "id": 1, "name": "이름", "price": 가격, "img_url": '이미지경로', New: true //상단에 뉴 상품인지 베스트 상품인지 구분 Best: false }, { "id": 2, "name": "이름", "price": 가격, "img_url": '이미지경로' New: true Best: false }, { "id": 3, "name": "이름" "price": 가격, "img_url": '이미지경로', New: true Best: false } ]
constructor(){ supuer(); this.state = { productList: [] //state값에 key값을 배열에 담는다! } }
componentDidMount(){ //DidMount안에서 feact함수를 쓰자! fetch("경로") .then(res => json()) .then(res => console.log(res); //콘솔로 값이 들어오나 확인해보자 }
componentDidMount(){ fetch("경로") .then(res => json()) .then(res => this.setState({productList: res)}) }
먼저 맵을 사용하기 위해서는 한 요소에 인자를 받아야한다.
map
(인자) =>{<Product/>}
//인자에는 직관적인 이름이 들어가게! 한 요소가 어떤 기능을 하는지 모르기 때문에 직관적으로 적어주자
<product/>
컴포넌트 안에서 전부 불러와야하는데 먼저 각각 고유한 값이 필요하기 때문에 key값이 필요하다.key
값은id
를 지정해주었기에zook.id
을 줬다.
map
을 전달했으니까 props
로 들어왔는지 확인해야겠다
console.log(this.props)
props는 객체이기 때문에 오브젝트로 넘어온 걸 볼 수 있다
product
에서 const함수로 구조분해할당을 해준다sate={monsters=[], userInput=""}
handleChange
이벤트에searchChange
로우 함수를 사용해서
이벤트 지정한 후InputValue
에다가 value값을 받아준다.
그럼InputValue
는 setState에다가 빈문자열에 넣어주면 업데이트 !!
searchChange = (e)=>{ const InputValue = e.target.value //InputValue라는 변수에 이벤트 타겟을 받고 this.setState({ userInput: InputValue })//빈문자열(userInput)에 값을 받아 setState로 변경시켜줌 }
우리는 소문자로 시작해서 이름을 찾을 것이다!
filter
의 비교대상은 name
소문자로 바꾼 monster.name
값과 userInput
값을 비교.
const data = this.state.monsters.filter((el)=> el.name.toLowerCase().includes(this.state.userInput))
const 함수로 data 를 선언해주고 그 값을 filter로 담는다
filter에 el이라는 인자를 받고
우리는 이름을 찾기 위한 것이니까 name으로 찾는다!
toLowerCace()
메소드를 쓰게 되면 소문자로 판별 되기 때문에 사용했고,
includes()
메서드로 빈문자열에 담아준다면 필터 적용이 끝난다!
console.log
입력값 들어온 걸 확인 할 수 있다.
MyCode
👍🏻👍🏻👍🏻