9/16 학습

React란?

• 프론트엔드 개발을 위한 라이브러리
• 선언형 : 한 페이지를 보여주기 위해 하나의 파일에 작성을 지향.
• 컴포넌트 기반 : 기능 구현 단위인 컴포넌트를 기반으로 하기 때문에 재사용성이 높다.
• 범용성 : 프레임워크와 다르게 작성 중인 코드에 범용적으로 사용 가능하다.

JSX(JavaScript Syntax Extension or JavaScript XML)

• JS를 확장한 문법으로 react에서 UI를 구성할 때 사용된다.
• Babel이 JSX를 브라우저가 이용할 수 있는 JS로 컴파일 해 준다.
• 구조(HTML)와 기능(JS)를 한 뭉치로 적은 코드(컴포넌트)를 이용하기 때문에 재사용성이 높고, 수정 사항이 생겼을 시 수정할 사항이 적어진다.
• HTML의 class를 사용 시 className이라는 어트리뷰트를 사용한다.
• JS표현식 사용 시 {}를 사용
• 사용자 정의 컴포넌트는 대문자로 시작
• 조건부 렌더링에는 삼항연산자 사용
• 여러 개의 HTML엘리먼트를 표시할 때 map()함수를 사용. 이 경우 key를 지정해 줘야 한다.
  

function App() {
  const objs = [{id:1, text: "첫 번째 객체"}, {id:2, text: "두 번째 객체"}, {id:3, text: "세 번째 객체"}];

  return (
    <div className="App">
      {objs.map(obj => {
    	// 객체의 아이디를 키로 사용
        // key를 지정하지 않을 경우
        // Warning: Each child in a list should have a unique "key" prop 경고가 뜬다.
        return (<div key={obj.id}>{obj.text}</div>)
      })}
    </div>
  );
}