React 기록(2)

리액트의 Component와 Props, event에 대해 공부했다.

0. App.js 파일의 대략적인 구조

1. 임포트문
2. 내가 정의한 컴포넌트들

function 함수이름(props){
	...
    return 내용
}

3. 메인함수 같은 부분

function App(){
	변수 선언
    return(
    	컴포넌트들
    )
}

4. 익스포트문

1. 전체 코드

import logo from './logo.svg';
import './App.css';


function Header(props){
  return <header>
        <h1><a href="/" onClick={(event)=>{
          event.preventDefault();
          props.onChangeMode();
        }}>{props.title}</a></h1>
      </header>
}

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 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){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
    {props.wow}
  </article>
}

function App() {
  const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'js', body:'js is...' }
  ]
  return (
    <div>
     <Header title="WEB" onChangeMode={()=>{
      alert('Header');
     }}></Header>
     <Nav topics={topics} onChangeMode={(id)=>{
      alert(id);
     }}></Nav>
     <Article title="Go Away" body="Byebb"></Article>
    </div>
  );
}

export default App;

• 컴포넌트명은 대문자로 시작
• props의 사용
  1. 속성 부여 Header title="WEB"
  2. 파라미터 설정 function Header(props)
  3. props 호출 props.onChangeMode()

실행결과

2. 파트 별로 나누어 보기

전체적으로 볼 때 잘 안 와닿는 것 같아서 다음으로 나누어 정리했다.

1. Header 컴포넌트 + App함수
2. Nav 컴포넌트 + App함수
3. Article 컴포넌트 + App함수

Nav 파트가 복잡하니 한번 더 볼 것!
그리고 문법에 대해서는 설명이 부족하다고 느껴서 리액트의 문법에 대해 좀 더 찾아봐야겠다.. =, :, <> 등등의 기호를 쓰는게 헷갈린다. 강의에서 어느 부분은 html 문법을 따르고 어디는 유사 html이라고 했는데 이 부분에 대해 추가적으로 찾아서 정리해볼 예정이다.