React를 배워보자3

모든 내용은 유튜브 생활코딩을 보고 만든것입니다.
생활코딩 유튜브 바로가기.

✔️ 컴포넌트

리액트는 사용자 정의 태그를 만드는 기술이다. 이것이 리액트의 본질이다.
-by 생활코딩

컴포넌트 규칙
✔︎ 첫글자는 대문자!

function Header(){
  return <header>
    <h1> <a href = "/"> React </a> </h1>
  </header>
}

<Header></Header>

✔️ prop

props.title 은 중괄호로 감싸서 사용해야 한다!

function Header(props){  //이때 props는 아무거나 써도 상관 없지만 모두들 props를 사용한다!
  return <header>
    <h1> <a href = "/">{props.title}</a> </h1>
  </header>
}

위에서 사용된 title은 아래 사용자 정의 태그에서 파라미터로 지정해 줄 수 있다!

<Header title="REACT"></Header>

✔️ prop 응용

리스트 형태로 토픽들을 받아온 뒤 차례대로 출력!

<Nav topics={topics}></Nav>

topics라는 리스트를 만든다.

const topics = [
  {id:1, title:'html', body:'html is ...'},
  {id:2, title:'css', body:'css is ...'},
  {id:3, title:'js', body:'js is ...'}
]

Nav 컴포넌트 설정
lis 라는 빈 리스트 생성
const를 사용하면 lis를 뒤에서 바꿀수 없다!

const lis = []

반복문을 이용하여 빈 리스트에 topics에 있는 요소들을 저장해준다.

이때 push는 파이썬에서의 append 함수와 비슷하다.

for(let i=0; i<props.topics.length; i++){
  let t = props.topics[i]
  lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>)
}

nav 반환

return <nav>
  <ol>
    {lis}
  </ol>
</nav>