DAY 19. REACT
JSX 규칙
- 하나의 엘리먼트 안에 모든 엘리먼트가 포함
- 엘리먼트 클래스 사용시 className 표기
- Javascript표현식 사용시 중괄호{}이용
- 사용자 정의 컴포넌트는 대문자로 시작
- 조건부 렌더링에는 if문이 아니라 삼항연산자 사용
<div>
{
(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>
- 여러개의 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 이길로 가면 뭐가 나온다
구조분해할당??
Author And Source
이 문제에 관하여(DAY 19. REACT), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@syc765/DAY-19.-REACT저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)