4월 22일 TIL

오늘은 git test를 진행했다.

깃테스트를 진행하는데 별 어려움은 없었다.

내가 깃으로 위스타그램 작성한 걸 날려먹을 수 있었던 적이 있었기 때문에

깃을 다루는거에 많이 익숙해진 것 같다.

오히려 함수를 짜는데에 시간이 오래걸렸다.

1부터 50까지의 수 중 짝수를 구하고 배열을 만드는데 왜 5분이나 걸리는걸까

const arr = [];

function test() {
  for (let i = 1; i < 51; i++) {
    if (i % 2 === 0) {
      arr.push(i);
    }
  }
  return arr;
}

깃 생성하고 코밋하고 올리고 연동하고 푸쉬 그러는건 이제 쉽다.

하지만 깃에서 오늘 배운거 하나 있었다.

그건 깃허브에서 pull request 하는 방법과 merge 하는 방법. 난 풀 리퀘스트가 명령어가 있는줄 알고 찾아봤는데 그냥 깃허브 들가서 버튼만 누르면 되는 것이었다...

그래도 깃에 대한 기본 개념은 이제 거의 이해했다고 생각한다.

그리고 오늘 한 세션 중 컴포넌트 재사용 연습이 있었는데

가뜩이나 props와 mockdata 이용하는거에 약한데

애를 좀 많이 먹었다. 역시 동기들의 도움 없이 혼자서 진행하기 어려웠다.

const [monsters, setMonsters] = useState([]);

유즈스테이트에 monsters를 지정해주고 배열에 데이터를 담기위해 [ ]를 넣는다

useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((result) => {
        setMonsters(result);
      });
  }, []);

데이터를 받아온 다음에

<div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <CardList monsters={monsters} />
</div>

자식 컴포넌트 CardList에 props를 전달해준다.
이제 카드리스트를 가보면

function CardList({ monsters }) {
  return (
    <div className="cardList">
      {monsters.map((monster) => {
        return (
          <Card
            key={monster.id}
            id={monster.id}
            name={monster.name}
            email={monster.email}
          />
        );
      })}
    </div>
  );
}

부모컴포넌트 monsters한테서 props를 받고

array.map을 돌려주고 Card 안에 인자로 key값과 value 값을 전해준다.

그럼 Card로 가보면

function Card({ id, name, email }) {
  return (
    <div className="cardContainer">
      <img
        src={`https://robohash.org/${id}?set=set2&size=180x180`}
        alt="monster"
      />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

card안에 id, name, email를 받고

쓸 위치에 넣어준다.

그리고 url 안에 인자를 넣어줘야 하기 때문에 백틱 을 사용하고 ${} 안에 인자를 넣어준다.

다른 방법으로 구조분해를 이용해서

function CardList({ monsters }) {
  return (
    <div className="cardList">
      {monsters.map((monster) => {
        return <Card monster={monster} key={monster.id} />;
      })}
    </div>
  );
}

카드리스트에서 몬스터를 카드로 넘겨주고

function Card({ monster }) {
  const { id, name, email } = monster;
  return (
    <div className="cardContainer">
      <img
        src={`https://robohash.org/${id}?set=set2&size=180x180`}
        alt="monster"
      />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

구조분해를 해서 지정해주는 방법도 있다