[SEB FE 44] React 시작

✍ 복습자료

map 메서드

React에서 여러 데이터를 렌더링 할 때 사용한다.
=> 수 많은 데이터를 렌더링 해야될 때는 하나하나씩 렌더링 하기에는 비효율적이므로 map 메서드를 사용한다.

function Blog() {
  // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

• return 문 안에서 map 메서드를 사용할 수 있나?
  JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메서드의 결과를 return문 안에 인라인으로 처리할 수 있다.

  처음 React를 학습할 때 map 메서드를 인라인으로 처리한 경우가 많았다. 이제는 코드 가독성을 위해 변수로 추출해서 사용해보자!

• React에서 map 메서드 사용 시, key 속성이 없으면?
  리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다. key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣어주면 된다.
  
  

JSX

HTML + Javascript => 새로운 문법
JSX는 브라우저가 바로 실행할 수 있는 JS 코드가 아니다.
=> Babel이 JSX코드를 JS로 변환해준다.
React를 조금 더 HTML과 비슷하게 작성할 수 있는 방법

📌 오늘의 알파

왜 React를 배울까?

1. UI를 이전보다 쉽게 구현할 수 있다.
2. 자바스크립트 문법을 그대로 사용했기 때문에 따로 공부할 문법들이 적다.
3. 많은 사용자를 가지고 있기 때문에 참고할 레퍼런스들이 많다.
4. 컴포넌트 기반으로 개발할 수 있기 때문에 재사용이 용이하게 코드 개발할 수 있다.
5. React를 배우면 React-Native를 통해 모바일 개발도 할 수 있다.
   
   

JSX, JavaScript 둘 중에 어떤 문법을 사용한 것일까?

// JavaScript X
// JSX 표현식
const word = <div>저는 아이폰입니다.</div>