REACT- component, prop

컴포넌트 만들기

➡️ 사용자 정의 태그를 만드는 것.

기본 세팅(시작)

function App() {
  return (
    <div className="App">

      {/* 홈으로 이동하는 헤더 영역 */}
      <header>
        <h1><a href="/">WEB</a></h1>
      </header>

      {/* html, css, js같은 구체적인 글을 보는 페이지로 이동하는 영역 */}
      <nav>
        <ol>
          <li><a href="/read/1">html</a></li>
          <li><a href="/read/2">css</a></li>
          <li><a href="/read/3">js</a></li>
        </ol>
      </nav>

      {/* 본문을 표현하는 영역 */}
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>

    </div>
  );
}

export default App;

컴포넌트로 만들기

function Header() {
  return <header>
    <h1><a href="/">WEB</a></h1>
  </header>
}

function Nav() {
  return <nav>
    <ol>
      <li><a href="/read/1">html</a></li>
      <li><a href="/read/2">css</a></li>
      <li><a href="/read/3">js</a></li>
    </ol>
  </nav>
}
function Article() {
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}

function App() {
  return (
    <div className="App">

      {/* 홈으로 이동하는 헤더 영역 */}
      <Header></Header>

      {/* html, css, js같은 구체적인 글을 보는 페이지로 이동하는 영역 */}
      <Nav></Nav>

      {/* 본문을 표현하는 영역 */}
      <Article></Article>

    </div>
  );
}

export default App;

컴포넌트-> <Header></Header>, <Nav></Nav>, <Article></Article>

prop(속성)

Header, Article에 props 넣기

function Header(props) {
  return <header>
    <h1><a href="/">{props.title}</a></h1>
  </header>
}

function Nav() {
  return <nav>
    <ol>
      <li><a href="/read/1">html</a></li>
      <li><a href="/read/2">css</a></li>
      <li><a href="/read/3">js</a></li>
    </ol>
  </nav>
}
function Article(props) {
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}

function App() {
  return (
    <div className="App">

      {/* 홈으로 이동하는 헤더 영역 */}
      <Header title="REACT"></Header>

      {/* html, css, js같은 구체적인 글을 보는 페이지로 이동하는 영역 */}
      <Nav></Nav>

      {/* 본문을 표현하는 영역 */}
      <Article title="Welcome" body="Hello, WEB"></Article>
      <Article title="반가워" body="열심히 하자~~~"></Article>

    </div>
  );
}

export default App;

여러 목록을 가지고 있는 nav에도 props를 넣어보자

1. 배열안에 객체로 만들어준 후 컴포넌트에 넣어주기.

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 className="App">

      {/* 홈으로 이동하는 헤더 영역 */}
      <Header title="REACT"></Header>

      {/* html, css, js같은 구체적인 글을 보는 페이지로 이동하는 영역 */}
      <Nav topics={topics}></Nav>

      {/* 본문을 표현하는 영역 */}
      <Article title="Welcome" body="Hello, WEB"></Article>

    </div>

✅

<Nav topics=topics></Nav>  이렇게 {}(중괄호) 없이 넣으면 안된다! 

2. 중간 과정 -직접 넣기

function Nav(props) {
  const lis = [
    <li><a href="/read/1">html</a></li>,
    <li><a href="/read/2">css</a></li>,
    <li><a href="/read/3">js</a></li>
  ]
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

➡️ 이렇게 만들어주면 화면에는 똑같이 나오지만 아무런 쓸모가? 없다.
➡️ props에 topics에 전달된 값을 받아서 {lis}있는 곳에 동적으로 태그를 만들어서 배열에 담아줄 수 있도록 해보자.
➡️ 이때 사용하는게 map, for문. 아직 map은 어려우니 for문으로

3. < li >태그 동적으로 넣어주기.

function Nav(props) {
  const lis = []
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i]
    lis.push(<li>{t.title}</li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

4. link로 만들기

function Nav(props) {
  const lis = []
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i]
    lis.push(<li><a href={'/read' + t.id}>{t.title}</a></li>)
  }

➡️ < li > 요런 태그들은 각자 key라는 프롭을 가져야하고,
그 key라는 프롭의 값은 그 반복문 안에서는 유니크 해야 한다. (고유해야 한다)
➡️ 여기까지만 작성했을 때 나오는 오류.

5. 고유 key 넣기

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 href={'/read' + t.id}>{t.title}</a></li>)
  }

➡️ react는 이렇게 자동으로 생성한 태그의 경우에 react가 이 태그들을 추적해야 하는데, 추적할 근거가 있어야 한다.
➡️ react에게 key라고 하는 약속된 prop을 부여함으로써 react가 성능을 높이고 정확한 동작을 하는데 우리가 협조를 하는 거라고 생각하면 된다.

*참고 - 이고잉 react