[React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 18. 오류, issue 고치기, validateDOMNesting(...): <td> cannot appear as a child of <a>

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial

 

 

 

 

Hi Everybody 안녕 Hola!

 

 

 

 

 

 

 

오랜만의 포스팅이다.

 

 

지난주부터 개발 들어가고 2주를 바삐 보냈다.

 

 

 

react는 공부할수록 새롭다. 새로워....!

 

 

기회가 된다면 library 중 하나인 redux-persist 도 추가하면 어떨까 생각 중이다.

 

 

UI는 Material UI로 바꾸거나 Ant design을 더 알아보거나 

 

 

요즘 든 생각인데 UI 도큐먼트는 공식 홈페이지에서 예제로 보는 것보다 그냥 import된 파일을 뜯어보는 게 더 나은 것 같다.

 

특히 검도...... 설명이 넘나리 불친절하다.

 

 

 

 

 

 

 

 

 

 

 

 

목록 부분에 들어갔을 때 보이는 오류인데

 

validateDOMNesting(...): <td> cannot appear as a child of <a>

 

 

 

 

 

구글링해보니 onClick 이벤트로 고쳐줘야 한단다

 

 

stackoverflow.com/questions/58093536/validatedomnesting-td-cannot-appear-as-a-child-of-a

 

 

 

 

난 지금 BoardList 테이블 부분에 reat-router의 Link 컴포넌트를 사용했었는데

옳지 않은 방법이라 하니 (돌아는 가지만 그래도 해결하는 게 좋다고 하니)

 

 

// BoardList.js


  <Link to={`/article/${article.id}`}>
    <td>
      {article.title}
      &nbsp;
      {props.commentLength[article.id] > 0 &&
        `[${props.commentLength[article.id]}]`}
    </td>
  </Link>

 

 

 

어디 한 번 고쳐보자

 

 

 

 

우선 BoardPage로 간다.

 

 

react-router의 hook인 useHistory를 import하여 BoardPage 컴포넌트 안에 history 로 받아둔다.

 

 

hook은 반드시 컴포넌트 안에서 변수를 선언하여 받아야 한다.

 

컴포넌트 바깥이나 안의 다른 함수에서 받으려 하면 실행되지 않는다.

 

 

import React, { useEffect } from "react";
import { Link, useHistory } from "react-router-dom"; // 추가된 부분
import BoardList from "./Sections/BoardList";
import { Button, Typography } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { boardActions } from "../../../slice/boardSlice";
import { articleActions } from "../../../slice/articleSlice";
import { createSelector } from "@reduxjs/toolkit";

const { Title } = Typography;

function BoardPage() {
  const dispatch = useDispatch();
  const history = useHistory(); // 추가된 부분
  
  .
  .
  .
  }

 

 

 

 

 

그리고 클릭했을 때 해당 아이디를 가진 게시글 화면으로 넘어갈 수 있는 메소드를 만든다.

 

 

  const onArticleTitleClick = (id) => {
    const path = `/article/${id}`;
    history.push(path);
  };

 

 

 

만든 메소드는 BoardList 컴포넌트의 property로 넣어준다.

 

 

          <BoardList
            board={board}
            commentLength={commentLength}
            handleDeleteClick={onDeleteClick}
            handleArticleTitleClick={onArticleTitleClick} // 추가
          />

 

 

프로퍼티로 넘겨준 onArticleTitleClick을 BoardList에서 props.handleArticleTitleClick으로 받아준다.

 

그리고 <td> 태그에 onClick 으로 넣어준다.

 

 

메소드에서 id를 input으로 받게 만들었으므로

 

handleArticleTitle 에서도 id를 넣어준다.

 

 

// BoardList.js

        <tbody>
          {props.board.map((article) => (
            <tr key={article.id}>
              <td>{article.id}</td>

              <td onClick={() => props.handleArticleTitleClick(article.id)} // 추가
              >
                {article.title}
                &nbsp;
                {props.commentLength[article.id] > 0 &&
                  `[${props.commentLength[article.id]}]`}
              </td>

              <td>{article.views}</td>
              <td>
                <Button onClick={() => props.handleDeleteClick(article.id)}>
                  X
                </Button>
              </td>
            </tr>
          ))}
        </tbody>

 

 

 

 

 

결과를 보면

 

 

 

 

 

 

 

 

 

하이퍼링크 표시는 사라졌지만 글 제목을 누르면

 

 

 

 

 

 

 

 

이슈 끝

 

오늘 useState를 없애는 게 해결되면 바로 뒤이어 포스팅하겠다.

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial