[React] props

💡 props

// 이전에 만든 컴포넌트 
<Header></Header>
<Nav></Nav>
<Article></Article>

// HTML 태그
<img src="imge/jpg" width="100" height="100">

HTML은 컴포넌트와 다른 요소를 가지고 있다
src, width 등의 속성으로 입력 값을 가진다

❓ 컴포넌트도 속성을 가지려면

• React의 속성 "PROP"

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

function Header (props) {  // ❗️ 함수의 첫번째 파라미터 : props
  console.log('props', props, props.title);
  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) {  // Header와 마찬가지
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  )
}
function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article title="Welcom" body="Hello, WEB"></Article>
      <Article title="Hi" body="Hello, React"></Article>
    // props를 이용하면 같은 Article 이라도 다른 내용 작성이 가능
    </div>
  );
}

export default App;

❓ Nav에도 적용하려면

• 변수 만들고, return 값에 prop 전달

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"></Header>
      <Nav topics={topics}></Nav>  // ❗️ topics를 prop으로 전달
      <Article title="Welcom" body="Hello, WEB"></Article>
    </div>
  );
}

• 함수에 topics 받아오기
• li 배열 만들기

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>
  )
}

• for문 사용해서 배열 반복 시키기
• 링크 만들기

function Nav (props) {
  const lis = [];
  // topics 원소의 숫자만큼 반복
  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>)
  }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  )
}

❗️ 에러 발생

• 각 li 태그에 고유한 key라는 prop을 줘야함 ( 반복문 안에서 )

• key 값을 주는 이유 : 자동으로 생성한 태그의 경우 React가 태그를 추적할때 그 근거로 key라는 약속된 prop을 부여함으로써 성능을 높이고 정확한 동작을 하는데 협조하는 것

❗️ 해결

function Nav (props) {
  const lis = [];
  // topics 원소의 숫자만큼 반복
  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>)
  }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  )
}

✨ 끝 !

✦ 출처 : 생활코딩 [React 2022년 개정판]