[생활코딩] props

React는 속성을 prop이라고 부른다.

 

/*prop 사용법*/

function Header(props){ //파라미터로 props를 준다.

//console.log('props', props); props에 어떤 내용이 있는지 알아보기 위한 문장이다. 웹 페이지에서 개발자 도구를 켜서 console-props-Object가 들어온 것을 확인할 수 있다. Object의 내용에는 title: "REACT"가 있다.

 

console.log('props', props.title); //props.title을 작성함으로써 Header 태그 안의 "REACT"가 출력된다.

//<h1><a href="/">{props.title}</a></h1> 이 문장 역시 "REACT"가 출력된다.

 

return <header>

<h1><a href="/">WEB</a></h1> //function Header() 안에서 내용을 바꾸지 않고

</header>

}

<Header title="REACT"></Header> // Header 태그에 타이틀 값을 주어서 내용을 바꾼다.

 

 

/*Nav 태그에 props를 주어서 li를 만드는 방법*/

function Nav(props){

const lis=[

]

for(,et i = 0; i < props.topics.length; i++){ //topics의 원소의 숫자만큼 반복된다.

    let t = props.topics[i];

    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>) //list 만들기, a href를 이용해서 링크를 걸어준다. {}는 동적이다.

}

  return <nav>

      <ol>

          {lis} //배열을 그대로 전달한다.

    </ol>

</nav>

}

function App(){

const topics = [ //topics 변수는 함수 내에서 변하지 않기 때문에 const를 앞에 붙여준다.

    {id:1, title:'html', body:'html is ...'},

    {id:2, title:'css', body:'css is ...'},

    {id:3, title:'javascript', body:'javascript is ...'} //id도 고유한 값으로 지정해야 한다. id 1, id 2, id 3...

] 

return)

    <div>

        <Header title="WEB"></Header>

        <Nav topics={topics}></Nav> //{topics}는 문자열이 아니라 있는 그대로 전달된다.

        <Article title="Welcome" body="Hello, WEB"></Article>

    </div>

  );

}