이제 프로젝트가 1주일도 남지 않았다. 약 하루 안에 댓글, 대댓글 기능을 완성을 하고, 기존의 기능들을 수정하고 완성도를 높이는 일을 해야했다.
팀원이 작성한 무한스크롤 코드를 보며..필요한 부분을 가져다 쓰고 있었는데, 처음 보는 문법을 발견해서 검색을 하게 됐다.
Fragment이게 뭘까 했다. 일단 직관적인 의미는 조각, 파편의 의미로 어떻게 보면 컴포넌트로 생각할 수 있을 것 같다.
react 공식 문서에서는
컴포넌트가 여러 자식을 반환하는 것
라고 설명한다.
역시 번역으로 글을 읽는 것은 야간의 리스크가 있는 것 같다. 영어를 읽어보니 약간은 더 친절하게 설명을 하고 있다.
돔노드를 추가하는 것 없이 자식 요소를 그룹화 할 수 있다.
이제 확실하게 이해가 갔다. 항상 간편하게 사용하던 빈태그를 의미하는 것이었다.
그렇다면 <>와 Fragment의 차이는 뭐가 있을까
역시 공식문서는 친절했다.
<>에는 key 값을 줄 수 없다. 그래서 map과 같이 key 값이 필요한 부분에서 의미없는 새 태그를 만들어서 사용을 했었는데, 그 부분을 간단하게 해결할 수 있게 되었다.
<table> <tr> <Content/> // <td>Hello</td> // <td>World</td> </tr> </table>
Content 컴포넌트 안에 아래 주석처리한 코드를 렌더링 한다면 밖을 감싸는 부모 태그가 무조건 있어야 한다.
<table> <tr> <div> <td>Hello</td> <td>World</td> </div> </tr> </table>
하지만 렌더링 된 모습은 불필요한 div가 있게 된다. 이런 일을 방지하기 위해 <>와 Fragment를 사용한다!
과연..?
하지만 <>와 Fragment를 많이 사용하면 좋을까 고민이 된다. 아무 의미 없는 태그를 생성할 일이 많다는 것은 마크업을 조금은 특별하게 한 것이 아닌지 고민을 해봐야한다.
모든 문법에는 적당히라는 말이 중요한 것 같다. 이번 프로젝트를 하면서 많이 느끼고 있다. 좋다고 해서 계속 쓰다보니까 오히려 최적화를 망치는 일도 하게 되고, 가독성을 떨어트리는 일을 쉽게 접할 수 있었다.
코드 리뷰 시간에 쓴 소리를 많이 들어서 그런지.. 이제 편해보이는걸 막 쓰는게 약간은 두렵지만 지금은 쓸 때가 왔다.
항상 이게 왜 쓰이는지를 알고, 스스로 납득을 시키는 연습을 해야겠다. 어떤 질문에도 답할 수 있는 건 이런 사소한 연습에서 나온다고 생각이 들기 때문이다!
오늘까지 댓글을 완성해보자..!
