REACT - React.Fragment map method console issue

목표

javaScript map method를 이용한 Button Component UI 배치 단계에서 발생하는 "key" props console issue 해결

---

문제 인식

• React styled component를 이용해 생성한 Button을 javaScript map 메소드로 UI 배치하는 과정에서 key props를 분명 줬음에도 Console Warning issue가 사라지지 않음을 확인

---

특이 사항

• Button styled component과
  태그에 분명 key값을 줬음에도 console issue가 해결되지 않음
• Button styled component와
  태그 둘 다 포함하여 map 메소드 순회하기 위해 React.Fragment(이하 <></>) 사용

---

주요 쟁점

• map 메소드로 주어진 컴포넌트를 순회하는 핵심 대상에 key값이 적용되지 않았음을 인지

---

해결

const questionList = [
  questionArray?.map((q) => (
    <>
      <Button
        key={q.questionId}
        onClick={() => {
          navigate(`/question/${q.questionId}`, {
            state: {
              question: q.question,
              questionId: q.questionId,
              writer: q.writer,
              publish: q.publish,
              userId: userId,
            },
          });
        }}
      >
        {q.question.length > 20
          ? q.question.slice(0, 20) + '...'
          : q.question}
      </Button>
      <br key="enter" />
    </>
  )),
];

• 위 코드에서 <></> 리액트 프래그먼트를 최상단 컴포넌트로 map 함수 순회하고 있음을 인지
• 축약형에 key 값을 적용할 수 없어 <React.Fragment key={ }> 를 통해 순회 대상 메인이 되는 요소에 key 값 적용 후 해결

const questionList = [
  questionArray?.map((q) => (
    <React.Fragment key={q.questionId}>
      <Button
        onClick={() => {
          navigate(`/question/${q.questionId}`, {
            state: {
              question: q.question,
              questionId: q.questionId,
              writer: q.writer,
              publish: q.publish,
              userId: userId,
            },
          });
        }}
      >
        {q.question.length > 20
          ? q.question.slice(0, 20) + '...'
          : q.question}
      </Button>
      <br key="enter" />
    </React.Fragment>
  )),
];

회고

javaScript 삼항 연산자나, map method, React component return 값으로 습관적으로 작성했던 React.Fragment(이하 <></>)에 대해 다시 한번 상기시킬 수 있는 Console issue였다. 이전에 유튜브에서 봐두었던 React.Fragment 자료 학습 덕분에 빠르게 원인을 파악할 수 있었다. 역시 기초부터 학습을 탄탄히 해야 한다는 걸 다시금 깨닫는다.