[react]Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>

react-dom.development.js:67 Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra whitespace between tags on each line of your source code.

 

=>

react 내에서 테이블을 계속 컴퍼넌트화 하고 mapping 하다 보니 자꾸 생기는 오류이다.

이전에는 좀 귀찮아서(어느부분인지 찾기가..) eslint 처리했지만, 가끔씩 발생하는 오류에 해결해야겠다싶어 

코드를 뜯어봤다.

 말 그대로 tbody 안에 공백이 들어가면 안된다 라는 warning 같은데 도무지 해결방법을 못찾다가 , table 안에 공백이 들어갈

수 있는 경우의 수에 대해 생각해보게 되었다.

물론 이 경우가 포괄적이지는 않지만 혹시라도 단순한 에러일 수 있기 때문에 참고가 되었으면 한다.

1. 비동기로 불러오는 데이터 이기 때문에 table 내에 들어가는 값이 일시적으로 빈값인 경우,

2.페이지 내부 return 문안에서 삼항다항식을 쓴경우 어느 조건식에도 해당하지 않을때 "" string 빈값을 부여한 경우이다.

나의 경우에는 두번쨰 경우에 해당하여 warning 이 발생하였으며, &&으로 변경하니 에러가 사라졌다.

 

       //1.에러발생한 코드 예시 (삼항다항식)
       {tabName ==="aaa" && EachPage ?
            EachPage.map((data,idx)=>(
              <FullGuideInnerTable 
              key={idx}
              data={data} idx={idx} 
              showNewGuideModal={showNewGuideModal}
              cellStyle={cellStyle}
              EachPage={EachPage}
              pageUserCount={pageUserCount}
              page={page}
              />
            ))
            :
            tabName ==="bbb"?
            EachPage.map((data,idx)=>(
              <FoodGuideInnerTable
              key={idx}
              data={data} idx={idx} 
              showNewGuideModal={showNewGuideModal}
              cellStyle={cellStyle}
              EachPage={EachPage}
              pageUserCount={pageUserCount}
              page={page}
              />
            ))
            :"" ////////이부분이 에러의 원인이였음  !!
            }
            
   //2.에러발생한 코드 해결 (삼항다항식)
       {(tabName ==="aaa" && EachPage) &&
            EachPage.map((data,idx)=>(
              <FullGuideInnerTable 
              key={idx}
              data={data} idx={idx} 
              showNewGuideModal={showNewGuideModal}
              cellStyle={cellStyle}
              EachPage={EachPage}
              pageUserCount={pageUserCount}
              page={page}
              />
            ))
            :
            tabName ==="bbb"?
            EachPage.map((data,idx)=>(
              <FoodGuideInnerTable
              key={idx}
              data={data} idx={idx} 
              showNewGuideModal={showNewGuideModal}
              cellStyle={cellStyle}
              EachPage={EachPage}
              pageUserCount={pageUserCount}
              page={page}
              />
            ))
       } //삼항다항식 에러 해결 - ""값 제거