6주 4회 - 리액트 2022-09-29

CodeModel·2022년 9월 29일

인사말

JSX규칙

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

리액트의 map

리액트의 map을 쓰려면 반드시 key 속성을 써야한다. key 속성의 위치는 map 메소드의 첫번째에 넣어야 한다. key는 더미데이터의 중복이 없는 고정된 값

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => { //tweet는 더미데이터를 전부 받는다
	// console.log(tweet)
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile"></div>
	         ...
          </li>
        );
      })}
    </ul>
  );
};

tweet은 더미데이터를 전부 받는다고 생각한다.

더미데이터는 배열에 객체가 들어있는 형식이다. [ { } , { } , { } , { } ]
그리고 이 객체에는

{ 
  id = 1
  name = 'code'
}

이런식으로 있는 것 이다.

map을 사용할 경우 map에 있는 tweet은 배열의 객체를 전부 받는다. 그리고 map이 시작되면 배열의 첫번째 객체, 두번째 객체, 세번째 객체.. 이런식으로 tweet이 가르키는게 바뀌게 된다. 그렇게 되면 그 안에 함수식의 teet.id는 첫번째 객체의 tweet.id이고 tweet.name은 첫번째 tweet.name이 되는 것 이다. 두번째의 map으로 간다면 두번째의 tweet.id와 두번째의 tweet.name을 사용할 수 있는 것 이다.