React - 컴포넌트를 이용한 리스트 랜더링

const comments는 id, name, comment, path 를 가진 리스트임

function Comment(props) {
  return (
    <div style={styles.wrapper}>
        <div>
            <img src={props.path} alt="프로필이미지" style={styles.image}/>
        </div>
        <div style={styles.contentContainer}>
            <span style={styles.nameText}>{props.name}</span>
            <span>{props.comment}</span>
        </div>
    </div>
  )
}

props을 통해서 부모컴포넌트로부터 name, comment, path를 전달받아서 랜더링함.

const CommentList = () => {
  return (
    <div> {
            comments.map(c => {
                return <Comment key={c.id} name={c.name} comment={c.comment} path={c.path}/>
            })
        }
    </div>
  )
}

export default CommentList

[코드 설명]

CommentList : 댓글 목록을 렌더링하는 컴포넌트

 

comments.map()

: comment배열을 순회하면서 각 댓글에 대해서 하나씩 Comment컴포넌트 생성

 

# map()는 배열의 요소를 전부 사용해서 동일한 길이의 새로운 배열을 리턴함

 

<Comment key={c.id} name={c.name}... />

>> comment컴포넌트에 props로 전달

 

name={c.name}: c.name 값을 Comment 컴포넌트의 name이라는 prop으로 전달

# props는 자식 컴포넌트에 선언되어 있음. 부모는 그저 건낼뿐 어떻게 받을지는 자식마음

comment={c.comment}: c.comment 값을 comment라는 prop으로 전달.

path={c.path}: c.path 값을 path라는 prop으로 전달.

 

(중요)

key={c.id}: 고유한 key 값을 React가 렌더링 효율성을 위해 사용.

(이는 props로 전달되진 않음, React가 내부적으로 사용함) 

리스트 내 객체가 고유값을 갖고있다고 선언하는 것