React ) 컴퍼넌트

아래처럼 사용자 정의 태그를 만들수 있다.

이때 return값은 문자열, 태그가 아니고 jsx 객체이다.

 

 

 

컴퍼넌트에 값을 전달할수도있는데, 마치 속성값처럼 작성하여 값을 전달할 수 있다.

하지만 진짜 태그도 아니고 진짜 속성값도 아니다. jsx 객체이다.

그렇기때문에 title이라고 안해도되고 aaaaa="WEB" 이렇게 전달해도 무방하다.

그냥 변수전달로 생각하면되겠다.

 

전달한 값은 props파라미터로 전달 받고, 전달하고 싶은 영역에 { } 처리하여 작성하면 된다.

{}에 있는 값은 문자열이 아닌 표현식으로 인식된다.

일반적으로 파라미터명은 props를 많이쓰며, props는 값을 전달하는데 하향전달만 가능하다.

 

 

Contents 영역도 수정해보자.

먼저 나열될 리스트의 정보를 객체로 만들어주고 Contents 에 값을 전달한다.

객체를 만들때에는 프라이머리key가 필요하다.

 

topics를 props로 받았다.

이 객체를 반복문을 돌려 lis라는 배열에 넣어준다. 반복을 돌릴때는 고유의 key가 필요하다.

이렇게 만든 lis배열을 return값으로 보낸다.

이때 lis는 묵시적반복이 일어난다. return안에 배열이 있으면 무조건 묵시적 반복이 일어나 배치되기때문에 굳이 저 안에서 반복문을 돌리고 할 필요가 없다.

 

 

이번에는 컴퍼넌트에 이벤트를 걸어보자.

Header와 Contents에 onChangeMode 함수를 걸어 alert이 뜨도록 작성했다.

물론 이름은 onChangeMode가 아니여도 되고 aaaaaamode이런거여도 상관없다. 

 

그다음 onClick이벤트를 걸어 위에서 만든 onChangeMode()함수를 콜했다.

추가로 Contents에서는 아이디를 설정하여 event.target.id로 id값을 매개변수로 넘겨주었다.

 

 

import './App.css';
function Header(props){
  return <header>
    <h1><a href='/' onClick={event=>{
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}
function Contents(props){
  console.log(props)
  const lis = [];
  for(let i=0; i<props.topics.length; i++){
    let t = props.topics[i];
    lis.push(<li key={t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
        event.preventDefault();
        props.onChangeMode(event.target.id);
      }}>{t.title}</a>
      </li>)
  }
  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}
function Article(props){
  console.log(props)
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}

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" onChangeMode={()=>{
        alert("header!!!")
      }}></Header>
      <Contents topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Contents>
      <Article title="Welcome" body="Hello, REACT"></Article>
    </div>
  );
}

export default App;