리액트의 조건부 처리가 궁금합니다.

Question

프로젝트들을 진행하면서 조건부 처리를 많이 사용하는데 이 두 개의 조건부 처리에 대해서 갑자기 궁금해서 질문 드립니다. const [isMCategoryVisible, setIsMCategoryVisible] = useState(false); - 조건부로 처리 {isMCategoryVisible && } - 스타일 조건부로 처리 이렇게 자주 사용합니다. 조건부로 처리하는 것은 렌더링을 할때 자바스크립트 조건을 검사하여 참 일때만 요소가 렌더링이 되며, 스타일로 `display:hidden`을 처리하면 HTML 검사할때 `hidden`을 찾아서 처리하지만 여기서 조건으로 처리가 되면 위에 조건부 처리로 하는 것과 같나요? 스타일 조건부로는 애니메이션을 사용할 때 많이 사용한거 같은데 어느 것이 더 효율적이나요??

김하늘 · Answer

먼저 display: none과 visibility: hidden을 혼동해서 쓰신 거 같은데 둘의 차이에 대해선 따로 다루지 않겠습니다.

성능적인 효율을 따지자면 사실상 차이가 없다고 봐도 될 거 같습니다. 어차피 리액트는 가상돔을 활용하여 렌더링을 최적화하기 때문입니다. 그보단 코드 가독성 및 유지보수 측면에서 조건부 렌더링 방법을 선택하는 게 더 의미있다고 생각해요.

개인적으로 일반적인 상황에선 전자의 코드가 더 명확하다고 생각합니다. 후자는 상태에 따라 클래스명을 바꾸는 거고 이는 해당 컴포넌트에 대한 스타일 변경을 의미하는데 반해 전자는 이 컴포넌트의 렌더링 여부를 명시적으로 보여주기 때문입니다. 추가적으로 후자는 스타일을 따로 작성해줘야 한다는 점도 있네요.