[React] - Props 기초개념, 사용법

<img src='/public/testImage.png' width="100" height="100">

위 코드를 보면 img 태그에 src, width, height 의 속성값이 있다.

 

리액트에서는 이 속성을 이르는 말이 prop 이다.

 

그렇다면, 리액트에서

아래 사진자료처럼 내가 직접 만든 컴포넌트에도

속성을 추가할 수 있을까?

바로 시작해보자.

---

 

아래 사진처럼 Header 컴포넌트의 값을 함수를 직접 수정하지 않고,
title 이라는 속성을 줬을 때, 이름이 바뀌도록 해보자.

 

1. 함수에 파라미터값을 전달하도록 한다.

+ 그럼 props에는 어떤 내용이 있는가?

Header 컴포넌트의 속성값이 props의 값으로 들어가는 걸 확인할 수 있다!!

 

+ 그럼 props로 title 값을 출력하려면?!

정답 : props.title

 

미취따미취따 너무쉽당

 

그럼 저 값(props.title)을 Header 함수컴포넌트의 값으로 쓰면 되겠네!!

 

놉!! 표현식을 써줘야 해~~

중괄호로 감싸주자~

 

완료!

+

 

재사용성이 장점인 리액트 예시

 

+ 번외)

이나당의 map 함수 요청

// map 사용함수
function Nav(props) {
  return (
    <nav>
      <ol>
        {props.topics.map((t) => (
          <li key={t.id}>
            <a href={'/read/' + t.id}>{t.title}</a>
          </li>
        ))}
      </ol>
    </nav>
  )
}

// for 사용함수
// 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>
//     )
//   } // 리액트에서는 자동으로 생성되는 태그들을 추적해야 하는데 추적할 근거로 고유한 키값을 요구하게된다.
//   return <nav>
//     <ol>
//       {lis}
//     </ol>
//   </nav>;
// }