React | 본Zook으로 복습 Part 1

준식님의 본죽 강의를 인상깊게 들은 나는 연휴기간에 본죽으로 지금까지 배운것들을 연습하고 연휴 끝나자마자 시작할 프로젝트를 준비하기 좋을것 같다는 생각이 들어 연휴가 시작된 2월 6일 토요일부터 본죽 Semi-클론코딩을 시도해보았다. (물론 준식님 강의를 다시 보면서,,,,)

먼저 zookData.json 파일에 죽 6개를 mockdata로 써보았다. 이런 object 6개가 array안에 있음.

신상품, 인기메뉴는 내 마음대로...boolean값을 지정했다.

그러고 Menu.js를 만들어서 this.state에 죽들이 들어갈 zookList: []라는 빈배열을 선언해주고, zookData를 fetch해왔다. 이제 zookList: []에는 내가 가져온 data (zookData.json)가 들어가있다.

componentDidMount() {
    fetch("/data/zookData.json", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          zookList: data,
        });
      });
  } 

그리고 Zook.js라는 컴포넌트에 보내줄 값들을 아래와 같이 지정해주었다. key값을 설정 안해주면 console.log가 화낸다...

  render() {
    return (
      <div className="zookContainer">
        {this.state.zookList.map((zook) => {
          return (
            <Zook
              key={zook.id}
              name={zook.name}
              imgSrc={zook.imgSrc}
              price={zook.price}
              isNew={zook.isNew}
              isBest={zook.isBest}
            />
          );
        })}
      </div>
    );
  }

그 다음 Zook.js라는 component에 죽 메뉴 하나를 렌더링 해보았다.

	<div className="Zook">
        <div
          className="zookImg"
          style={{
            backgroundImage: `url(${this.props.imgSrc})`,
            backgroundSize: `cover`,
            backgroundPosition: `center`,
          }}
        >
          {this.props.isNew && <span className="zookNew"> NEW </span>}
          {this.props.isBest && <span className="zookBest"> BEST </span>}
        </div>
        <span className="zookName">{this.props.name}</span>
        <span className="zookPrice">
          <span className="zookPriceNum">{this.props.price}</span>
          <span className="pricewon">원</span>
        </span>
      </div>

this.props가 너무 많다...destructuring은 나중에 하고,,,
아 inline-style도 하면 안되는데 this.props로 가져온 background image를 어떻게 scss에서 건들여야할지 모르겠다,,,
조건부렌더링도 한번 블로그 정리해야하는데,,,,

일단 저렇게 놔두고 죽이 뜨는지 좀 보기 위해서 최소한의 scss만 써보았다.

그리고 npm start

오... 나름 그럴싸하게 나왔는데 여기까지 와보니깐 드는 생각, "이거 4개씩 정렬을 어떻게 하지...?"
display: flex를 하면 자동적으로 한줄로 정렬이 되는데 이걸 4개씩 어떻게 끊지...? map하기전에 배열안에 객체들을 4개씩 잘라줘야하나..? for문을 돌리고 다시 조건문을 돌려서 i % 4 === 0 true면 새로운 row로 시작하게 해야하나..? 고민과 구글링을 하다가 토요일이 가버렸다,,,,,,,,