react hack

how to make component of react?

function Fuck(){
  return <nav>
  <ol>
    <li><a href="/read/1"></a>html</li>
    <li><a href="/read/2"></a>css</li>
    <li><a href="/read/3"></a>js</li>
  </ol>
  </nav>
}

사용자 정의 태그를 react - component 라고 사용하는데 정의하는 방법은 위와 같다

• 정의하려는 컴포넌트의 시작은 무조건 대문자로 선언하고 나머지는 자바스크립트 문법으로 함수를 만들어서 사용한다 그리고 만들어진 컴포넌트를 아래와 같이 app.js 에 넣어서 다시 컴파일 하면됨.

<nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는
  네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Header></Header>
        <Header></Header>
        <Fuck></Fuck>
      </header>
    </div>
  );
}

function Article(props){
  return <acrticle>
    <h2> {props.title}</h2>
    {props.body}
  </acrticle>
}

  function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Header title="all is well"></Header>
        <Header></Header>
        <Fuck></Fuck>
        <Article title="all is well" body="body all is well"></Article>
      </header>
    </div>
  );
}

밑에 코드에서 title="all is well " 이렇게 만들면 위에 전달되는 파라 미터인 props에 json 객체로 전달 된다 그리고 여기서 눈여겨 봐야 하는 것은 객체값을 html로 뿌릴 때는 {}을 사용해서 내부의 값을 문자열이 아닌 변수 값으로 사용하게 만드는 것이 가능하다! thymleaf랑 좀 비슷 한듯 다른듯 하네-

function Fuck(props){
const lis = []
for(let i = 0; i < props.topics.length; i++){
  let t = props.topics[i];
  lis.push(<li><a key={t.id} href={'/read/'+t.id}>{t.title}</a></li>)
}
return <nav>
<ol>
  {lis}
</ol>
</nav>
}
function Article(props){
return <acrticle>
  <h2> {props.title}</h2>
  {props.body}
</acrticle>
}
function App() {
const topics = [
  {id:1, title:'new list', body:'html is ...'},
  {id:2, title:'new list2', body:'css is ...'},
  {id:1, title:'new list3', body:'javascript is ...'},
]

return (
  <div className="App">
    <header className="App-header">
      <Header title="all is well"></Header>
      <Header></Header>
      <Fuck topics = {topics}></Fuck>
      <Article title="all is well" body="body all is well"></Article>
    </header>
  </div>
);
}

위의 코드가 음 topics라는 배열을 만들고 이를 conponent의 parameter로 전달한 경우이다. 여기서 볼 수 있듯 이를 이용하면 리스트 객체를 전달하는것이 가능하다 위해서 배열을 선언했는데 자바 스크립트는 상수로 배열을 선언해도 여기에 값을 삽입하는 것이 가능한가 보다 그리고 함수 내부 html에서 배열을 뿌릴 때는 그냥 {list}이런 식으로 전달하면 자동으로 배열을 풀어서 만들어 주나보다.

<li><a key={t.id} href={'/read/'+t.id}>{t.title}</a></li>

위의 코등서 눈여겨 보아야할 부분은 아이디 key 값을 지정하는 부분인데 자바 스크립트에 의해서 생성되는 컴포넌트는 반드시 key값을 가지고 있어야 한다.

function Header(props){ 
  return <header>
    <h1> <a href = "/" onClick={function(event){
      event.preventDefault();//리다이션되는 a 태그의 기능을 막음
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}


function App() {
  
  return (
    <div className="App">
      <header className="App-header">
        <Header title="all is well" 
                onChangeMode={function(){
          alert('Header hihi');//함수를  태그 내부에 만들어서 전달함
        }}
                ></Header>
        <Header></Header>
        <Fuck topics = {topics}></Fuck>
        <Article title="all is well" body="body all is well"></Article>
      </header>
    </div>
  );
}

함수를 Header componet 내부에 선언하고 이를 event 파라 미터로 Header component에서 받아서 사용함.