React 초보 실습 - 3

 

https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4 

 

1. Component, 컴포넌트 (함수 만들기)

* App.js *
## 리액트에서 함수 정의 시 함수명은 앞글자가 대문자여야 함.

# 함수를 정의하면
function Header(){
  return <header>
    <h1><a herf="/">WEB</a></h1>
  </header>
}

# 다른 함수에서도 사용할 수 있음.
# 파이썬과 다른 점이 있다면, 태그(<>)로 감싸서 사용
function App() {
  return (
    <div>
      <Header>
      </Header>
      <nav>
        <ol>
          <li><a herf="/read/1">html</a></li>
          <li><a herf="/read/2">css</a></li>
          <li><a herf="/read/3">js</a></li>
        </ol>
      </nav>
    </div>
    )
}

2. 컴포넌트로 다 분리하면 아래 코드도 가능

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

 

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

 

3. props, 프롭스 (매개변수 만들기)

# Header 함수에 props 속성을 달았다.
function Header(props){
  return <header>
    <h1><a herf="/">{props.title}</a></h1>
    </header>
}

function App() {
  return (
    <div>
      <Header title="REACT"></Header> #헤더의 제목을 REACT 로 바꾼다. 
      <Navigation></Navigation>
      <Article></Article>
    </div>
    )
}

결론적으로

1. App 함수에서 Header 함수를 이용하는데, title을 "REACT"로 이름지어 사용한다.

2. Header 함수는 props 속성이 걸려있으며, {props.title} 를 return 한다.

(* Javascript 에서는 텍스트가 아닌 속성을 이용할때 중가로를 이용하는 듯하다)