반복되는 컴포넌트를 목데이터(가짜데이터)로 이용해서 재사용이 가능하고,
백엔드 API를 기다리는게 아닌 먼저 기획에 맞게 구현되는지 확인이 가능하다
이제 프로젝트 시작하면 백엔드랑 소통도 더 잘 되겠다

목데이터를 관리하는 두가지 방법!!

1. js방식으로 배열 데이터를 변수에 담고, import해서 접근이 가능하다
2. 실제 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); //콘솔로 값이 들어오나 확인해보자
}

잘 들어온 걸 확인 할 수 있다.

이제 콘솔로 값이 들어온 걸 확인 했으니 setState로 변경시켜준다

어떤것을? 현재 담고 있는 productList에 res로!

componentDidMount(){
	fetch("경로")
    .then(res => json())
    .then(res => this.setState({productList: res)})
}

배열을 같은 형태로 만들기 위해서 map메소드를 사용하자.

먼저 맵을 사용하기 위해서는 한 요소에 인자를 받아야한다.
map (인자) => {<Product/>} //인자에는 직관적인 이름이 들어가게! 한 요소가 어떤 기능을 하는지 모르기 때문에 직관적으로 적어주자
<product/> 컴포넌트 안에서 전부 불러와야하는데 먼저 각각 고유한 값이 필요하기 때문에 key값이 필요하다. key값은 id를 지정해주었기에 zook.id을 줬다.

자 ! 거의 다 왔다

map 을 전달했으니까 props 로 들어왔는지 확인해야겠다
console.log(this.props)
props는 객체이기 때문에 오브젝트로 넘어온 걸 볼 수 있다

• product에서 const함수로 구조분해할당을 해준다
  그러면 조금 더 가독성 있게 써 줄 수 있다!

결과 👏👏👏

---

---

2. 미니 프로젝트 검색기능 구현!!

1. 먼저 검색기능을 하기 위해서 state에 빈배열값과 빈문자열을 선언해준다.

sate={monsters=[], userInput=""}

2. handleChange 이벤트에 searchChange로우 함수를 사용해서
   이벤트 지정한 후 InputValue 에다가 value값을 받아준다.
   그럼 InputValue는 setState에다가 빈문자열에 넣어주면 업데이트 !!

searchChange = (e)=>{
const InputValue = e.target.value
//InputValue라는 변수에 이벤트 타겟을 받고
	this.setState({ 
		userInput: InputValue
	})//빈문자열(userInput)에 값을 받아 setState로 변경시켜줌 	
}

이제 filter메소드를 통해서 검색기능을 구현 해주면 되겠다

우리는 소문자로 시작해서 이름을 찾을 것이다!
filter 의 비교대상은 name
소문자로 바꾼 monster.name 값과 userInput 값을 비교.

const data = this.state.monsters.filter((el)=>
el.name.toLowerCase().includes(this.state.userInput))

1. const 함수로 data 를 선언해주고 그 값을 filter로 담는다
2. filter에 el이라는 인자를 받고
우리는 이름을 찾기 위한 것이니까 name으로 찾는다!
3. toLowerCace()메소드를 쓰게 되면 소문자로 판별 되기 때문에 사용했고,
   includes() 메서드로 빈문자열에 담아준다면 필터 적용이 끝난다!

console.log 입력값 들어온 걸 확인 할 수 있다.

MyCode

🏖 뚜둔!