Props

img 태그에 src 속성이 있듯이 직접 정의한 나만의 태그(컴포넌트)에 속성을 넣을 수 있는데, 리액트는 그 속성을 props 라고 부른다. 그리고 props에는 객체-Object가 들어온다.

📌 Props 기본 사용

각각의 컴포넌트(사용자 정의 태그)를 만들어준 후, rendering 되는 함수인 App()에 위치시켜 export 해주었다. App()을 보면 컴포넌트 태그 안에 속성을 넣어줬는데, 이 속성 값을 props로 가져와 컴포넌트에서 다음과 같이 출력할 수 있다.

// 1. Header Component
function Header(props) {
  console.log("props", props);
  return (
    <header>
      <h1>{props.title}</h1>
    </header>
  );
}

// 2. Contents Component
function Contents(props) {
  return (
    <ul>
      <li>{props.name1}</li>
      <li>{props.name2}</li>
      <li>{props.name3}</li>
    </ul>
  );
}

// 3. Footer Component
function Footer(props) {
  return (
    <article>
      <p>{props.title}</p>
    </article>
  );
}

// --- Export App ---
function App() {
  return (
    <div>
      <Header title="Fruits"></Header>
      <Contents name1="apple" name2="banana" name3="orange"></Contents>      
      <Footer title="Thank you!"></Footer>
    </div>
  );
}

export default App;

📌 변수 사용

컴포넌트 내부에서 변수를 선언한 뒤 중괄호{} 안에 변수명을 넣어 사용할 수 있다. (함수도 마찬가지!)
변수안에 다양한 요소를 담을 때는 배열요소 안에 객체형식으로 작성하며, 각각 고유의 id 값을 갖는다. 다음은 객체형식의 변수를 props(태그속성) 값으로 넣은 뒤, 컴포넌트에서 빈 변수안에 배열 갯수만큼 태그를 자동 생성하여 출력해준 것이다.

• 반복문 안에서 자동으로 생성된 태그는 리액트가 추적할 때 근거가 있어야 하므로 각각의 태그들은 고유의 key 값을 가져야 한다.

// 빈 list 변수 안에 과일명이 들어있는 fruName의 각 값을 차례대로 넣어준다. 
// 그리고 값이 들어간 list 변수를 return 해준다. 

function Contents(props) {
  const list = [];

  for (let i = 0; i < props.name.length; i++) {
    let n = props.name[i];
    list.push(<li key={n.id}>{n.title}</li>);
  }

  return (
    <nav>
      <ol>{list}</ol>
    </nav>
  );
}


// 변수를 선언하고 각 정보에 고유 id값 주기
// 선언한 변수를 {} 안에 넣어 사용 
function App() {
  const fruName = [
    { id: 1, title: "apple" },
    { id: 2, title: "banana" },
    { id: 3, title: "orange" },
  ];

  return (
    <div>
      <Header title="Fruits"></Header>
      <Contents name={fruName}></Contents>
    </div>
  );
}

export default App;