[React] props

1. props란?

• 컴포넌트의 속성값 -> 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체
• 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능

2. 데이터 전달 및 적용방법

// 부모 컴포넌트
import Comment from './Comment';

{commentList.map((comment, index) => (
    <Comment comment={comment} key={index} />
))}

// 자식 컴포넌트
import React from 'react';

export default function Comment(props) {
  return (
    <li className="description-comment" key={props.key}>
      <div className="article-info">
        <div className="ariticle-id">rntnwjd</div>
        <div className="article-description">{props.comment}</div>
      </div>
      <div className="comment-function">
        <button className="comment-delete">삭제</button>
        <i className="fa-regular fa-heart" />
      </div>
    </li>
  );
}

• 부모 컴포넌트에 자식 컴포넌트를 import시키고 return문 내에 자식 컴포넌트를 넣어준다.
• 넘겨줄 변수명 = {값} 형식으로 자식 컴포넌트에 보내준다.
  (값으로는 모든 데이터 타입을 넘겨줄 수 있다.)
• 자식 컴포넌트에서 매개변수를 props로 받아서 부모 컨테이너에서 보내준 데이터를 받아올 수 있다.
• props도 객체형태이기때문에 props.key의 형태로 접근하여 사용할 수 있다.