이번에 유저들의 메시지를 테이블 안에 구현하는 와중에 답글 기능이 필요해서 구현 방법을 정리해보려고 한다.
답글 기능을 구현할 때 메시지들을 단순히 ul 안의 li로 구성한다거나 div로 구현한다면 간단하게 구현할 수 있겠지만 테이블 형식으로 메시지에 대한 정보를 보여줘야 했기 때문에 table을 사용하여 구현하였다.
다음은 내가 구현한 코드이다.
<css>
table{
border: 1px solid black;
border-spacing: 0px;
border-radius: 12px;
}
.hidden{
display: none;
}<html>
<table>
<thead>
<tr>
<th>닉네임</th>
<th>작성 내용</th>
<th>답글</th>
</tr>
</thead>
<tr class ="row-1">
<td>개구리</td>
<td>포스팅 재미있게 봤습니다.</td>
<td><input type="checkbox" class = "check">답글</button></td>
</tr>
<tr class ="row-1-comment hidden">
<td colspan="3"><input type="text" placeholder="답글을 입력하세요."></td>
</tr>
<tr class ="row-2">
<td>강아지</td>
<td>많은 도움이 되었습니다.</td>
<td><input type="checkbox" class = "check">답글</button></td>
</tr>
<tr class ="row-2-comment hidden">
<td colspan="3"><input type="text" placeholder="답글을 입력하세요."></td>
</tr>
</table>
실제로는 데이터를 받아와서 테이블을 동적으로 만들어주지만 이번 포스팅의 목적이 답글 기능 구현인만큼 간단하게 html 태그로 표현하였다.
html을 자세히 보면 유저 메시지 정보를 알려주는 행 아래에 답글을 의미하는 행이 존재하고 hidden 속성을 추가하여 보이지 않게 구성하였다.
그리고 특정 행에 대한 답글이라는 것을 알려주기 위해 클래스 이름이 서로 연관있게 구성하였다.
이제 checkbox를 클릭할 때마다 check 여부를 확인해서 답글을 숨기고 보여주는 기능이 필요하다.
그런 이벤트를 자바스크립트로 붙여보자.
<javascript>
const checks = document.querySelectorAll('.check')
checks.forEach((check)=>{
check.addEventListener('click', ()=>{
const comment = document.querySelector(`.${check.parentElement.parentElement.className}-comment`)
console.log(`chcked : ${check.checked}`)
console.log(`chcked : ${check.parentElement.parentElement.className}`)
if (check.checked){
comment.classList.remove("hidden")
} else{
comment.classList.add("hidden")
}
})
})
주의사항
테이블 태그 안에 답글을 구현하려다보니 신경써야 할 부분이 있었다.
1. tr 태그를 사용하자.
처음엔 단순하게 div 태그를 행 아래에 붙이려고 했는데 table 안에 포함되지 않았다.
tr 태그를 사용하자.
2. colspan 속성을 활용하자.
컬럼이 여러 개 있다면 input 태그가 특정 열에 속해버리는 경우를 방지하기 위해 colspan으로 열을 병합하자.
3. tr태그에 display: block을 사용하지 말자.
처음에는 check 여부에 따라 답글에 해당하는 tr태그의 속성에 display: hidden, display: block를 적용했는데 display: block을 적용하는 순간 내부 td 태그의 colspan이 동작하지 않고 첫 번째 컬럼에 속해버리는 이슈가 발생했다.
그래서 css를 활용하여 display: none만 추가했다 빼는 방식으로 변경하였다.
table 태그 안에 답글 기능을 구현하려다보니 신경써야 할 부분이 너무 많았다.
단순히 데이터를 보여주는 형식이 아닌 여러 기능을 추가하려 한다면 div 태그나 li 태그를 활용해서 데이터를 보여주는 편이 커스텀하기 좋을 것 같다.
'공부 > 프론트' 카테고리의 다른 글
| [React] redux 사용법 (0) | 2024.04.26 |
|---|---|
| [React] useReducer와 Context로 상태값 관리 (0) | 2024.04.22 |
| [html/css] 테이블 꾸미기 (모서리 둥글게) (0) | 2024.04.03 |
| [html/css] input checkbox 커스텀 이미지 사용하기 (0) | 2024.04.02 |
| [html/css/js] 모달 창 구현 방법 정리 (0) | 2024.03.26 |
댓글