React 강의 정리(5강)

5강

PROP

 

일단 화면은 이렇게 생김

html 코드는 src나 width 같이 속성을 가지게 됨...우리가 만드는 컴포넌트도 속성을 가지면 좋지 않을까?

리액트는 속성을 prop이라고 함

우리가 만드는 컴포넌트에 어떻게 prop를 장착할까?

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

function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

이렇게 생긴 코드에서 알아서 Header함수에 전달된 값으로 저 React라는 단어가 띄어지면 얼마나 좋을까?

function Header(props){
  console.log('props',props, props.title);
  return <header>
    <h1>
      <a href="/">{props.title}</a>
    </h1>
  </header>
}

function App() {
  return (
    <div>
      <Header title="React"></Header>
      <Nav></Nav>
      <Article></Article>
      
    </div>
  );
}

이렇게 쓰면 된다.

일단 Header 함수의 인자로 props를 하나 둔다

콘솔에 로그로 props를 띄어보면 객체가 뜨는걸 확인할 수 있고 그 객체가 title:"React"임을 알 수 있음.

우리는 React라는 글자가 보고 싶기 때문에 콘솔에 props.title을 띄우면 React가 뜨는걸 볼 수 있다

 

그런데 그래서 Header 함수 안의 <a>태그에 props.title이라고 적으면 화면에 그대로 props.title 이 뜨는걸 볼 수 있다.

왜냐면 그냥 택스트로 인식했기 때문.

그럴때는 {props.title}처럼 중괄호 사이에 적으면 된다.

중괄호와 중괄호 사이의 정보는 일반적인 문자열이아니라 표현식으로 취급됨

 

그러고 이제 밑에 Article 함수도 똑같은 방법으로 만들면 아래와 같다

function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
function App() {
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
      
    </div>
  );
}

 

근데 이제 저 Nav 함수도 저렇게 하고 싶음 어떡하지?

 

일단 App함수 안에 const라는 상수(진행되는 동안 변하지 않음)로 topics라는 배열을 만든다.

function App() {
  const topics =[
    {id:1, title: 'html', body:'html is ...'},
    {id:2, title: 'css', body:'css is ...'},
    {id:3, title: 'javascript', body:'javascript is ...'},
  ] 
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
      
    </div>
  );
}

그리고 이 App에 있는 topics를 Nav라는 함수에 전달하고 싶어

function Nav(props){
  const lis=[]

  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>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

이렇게 Nav안에도 빈 lis라는 배열을 만든다.

그리고 for문을 topics의 길이 만큼 돌리고->각각의 반복 동안 topics의 인덱스를 따라 하나씩 같을 꺼내고->그를 lis에 push한다

여기서 포인트는 push 할때 <li key={t.id}>로 key를 줘야 된다는거

왠지는 몰라도 됨. 암튼 그래

 

 

참고: 생활코딩 react 2022 개정 강의

https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5