DAY 19. REACT

JSX 규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함
2. 엘리먼트 클래스 사용시 className 표기
3. Javascript표현식 사용시 중괄호{}이용
4. 사용자 정의 컴포넌트는 대문자로 시작
5. 조건부 렌더링에는 if문이 아니라 삼항연산자 사용

<div>
{
(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>

6. 여러개의 HTML엘리먼트 표시할 때

• map()함수 이용
• key속성 넣기

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
//⭐배열을 HTML에 뿌리고 싶다면 {}이용하기
  const content = posts.map(function(el){
    return<div>
    <li key = {el.id} >{el.id}</li>
    <li>{el.title}</li>
    <li>{el.content}</li>
    </div>
  })

  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {content}
    </div>
  );
}

HTML은 문자열이나 숫자만 읽을 수 있기 때문에 배열이나 객체를 HTML에 보이게 하기 위해서는 {}를 사용해야한다.

화살표함수는 return을 생략해도되지만 function을 직접 쓴다면 생략하면 안된다.

map함수를 사용할 때엔 key를 주어야한다. 보통 id를 준다.

React Router

와이파이 공유기같은 역할. 길 안내자

BrowserRouter

가장 상위 컴포넌트로 길을 터줘야하기때문에 모든 길을
관장하고 (알고)있어야한다.
꼭 상단에있어야하는건 아니긴하다. switch , route , link 를 감싸면 된다

nav 어떤 경로를 선택할 것인가

switch 무슨 route로 갈지 정해준다

자식인 route들을 모두 감싸준다.

route 이길로 가면 뭐가 나온다

구조분해할당??