작성한 질문수 2

1

안녕하세요, 소플입니다.

질문해주신 내용에 대해 답변드립니다.

1-1. key 값을 어떻게 넣어야 하는지?

key값은 map() 함수에서 리턴하는 가장 상위 element에 넣어주면 됩니다.

지금 작성하신 코드의 경우에는 id라는 고유한 값이 있으니, 그걸 사용해서 아래와 같이 넣어주면 됩니다.

import Card from './Card';

const names = [
    {
        id: 1,
        name: '학생 1',
        comment: '리액트 공부중입니다.',
    },
    {
        id: 2,
        name: '학생 2',
        comment: '리액트 공부중입니다.',
    },
];

function ProfileCard(props) {
    <div>
        {names.map((name) => {
            return (
                <Card
                    key={name.id}
                    title={name.name}
                    backgroundColor='#B57EDC'
                    comment={name.comment}
                />
            );
        })}
    </div>;
}

export default ProfileCard;

여기서 입문자 분들이 주로 헷갈리시는 부분은,

내가 만든 컴포넌트(Card)에는 key라는 prop을 따로 정의하지 않았는데 key라는 prop을 넣어도 되나?

라는 부분입니다.

하지만 key라는 속성은 리액트에서 배열 내에 있는 element들에게 기본적으로 제공하는 속성이기 때문에,

개발자가 별도로 정의하지 않고 사용해도 됩니다.

다만, key값은 리액트 내부적으로만 사용되며 컴포넌트의 prop으로 전달하여 사용할 수 없습니다.

(이미 예약되어 있는 속성이라고 생각하시면 됩니다.)

1-2. 다른 방법은 없는지?

여기서 말씀하시는 다른 방법이 어떤 것을 의미하는지 정확하게 모르겠지만,

key값으로는 고유한 값이라면 다 사용할 수 있습니다.

대표적으로는 아래와 같이 변수의 값, index, id, 문자열 조합 등이 있습니다.

// id를 사용한 경우
function ProfileCard(props) {
    return (
        <div>
            {names.map((name, index) => {
                return (
                    <Card
                        key={name.id}
                        title={name.name}
                        backgroundColor='#B57EDC'
                        comment={name.comment}
                    />
                );
            })}
        </div>
    );
}

// 값을 사용한 경우
function ProfileCard(props) {
    return (
        <div>
            {names.map((name, index) => {
                return (
                    <Card
                        key={name.name}
                        title={name.name}
                        backgroundColor='#B57EDC'
                        comment={name.comment}
                    />
                );
            })}
        </div>
    );
}

// index를 사용한 경우
function ProfileCard(props) {
    return (
        <div>
            {names.map((name, index) => {
                return (
                    <Card
                        key={index}
                        title={name.name}
                        backgroundColor='#B57EDC'
                        comment={name.comment}
                    />
                );
            })}
        </div>
    );
}

// 문자열 조합을 사용한 경우
function ProfileCard(props) {
    return (
        <div>
            {names.map((name, index) => {
                return (
                    <Card
                        key={`item-${name.id}`}
                        title={name.name}
                        backgroundColor='#B57EDC'
                        comment={name.comment}
                    />
                );
            })}
        </div>
    );
}

추가로 아래 리액트 공식 문서를 읽어보시면 더 확실하게 이해하실 수 있을 겁니다😀

https://react.dev/learn/rendering-lists#why-does-react-need-keys

감사합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import ProfileCard from './chapter_13/ProfileCard';
// import Calculator from './chapter_12/Calculator';
// import SignUp from './chapter_11/SignUp';
// import LandingPage from './chapter_09/LandingPage';
// import AttendanceBook from './chapter_10/AttendanceBook';
// import ConfirmButton from './chapter_08/ConfirmButton';
// import Library from './chapter_03/Library';
// import Clock from './chapter_04/clock';
// import CommentList from './chapter_05/CommentList';
// import NotificationList from './chapter_06/NotificationList';
// import Accommodate from './chapter_07/Accommodate';



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ProfileCard />
  </React.StrictMode>
);


// 시계만들기(chapter_04)
// setInterval(() => {
//   root.render(
//     <React.StrictMode>
//       <Clock />
//     </React.StrictMode>
//   );
// }, 1000);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

function Card(props) {
    const { title, backgroundColor, children } = props;

    return (
        <div
            style={{
                margin: 8,
                padding: 8,
                borderRadius: 8,
                boxShadow: "0px 0px 4px grey",
                backgroundColor: backgroundColor || "white",
            }}
        >
            {title && <h1>{title}</h1>}
            {children}
        </div>
    );
}

export default Card;

function ProfileCard(props) {
    return (
        <div>
            {names.map((name) => {
                return (
                    <Card
                        key={name.id}
                        title={name.name}
                        backgroundColor='#B57EDC'
                        comment={name.comment}
                    />
                );
            })}
        </div>
    );
}

export default ProfileCard;