<목차>
- display: none 과 visibility: hidden의 차이점
- styled-components를 써보셨나요? 사용하면서 느낀 장단점
1. display: none 과 visibility: hidden의 차이점
display:none
- 해당 요소가 문서 레이아웃에서 완전히 제거
- 요소가 차지하던 공간이 없어지고 다른 요소들이 그 공간을 차지
- 사용자의 이벤트(클릭, 터치등)를 받을 수 없음
- 자식요소에 따로 'display'속성을 성정하지 않으면 자식요소도 보이지 않음
- CSS 전환 또는 애니메이션이 작동하지 않음
visibility:hidden
- 요소를 보이지 않게 하기
- 요소가 차지하던 공간은 그대로 유지, 페이지 레이아웃에 여전히 영향
- 이벤트를 처리할 수 있다.
- ex) 숨겨진 요소 위에 마우스를 올려도 해당 요소의 이벤트 트리거 가능
- 자식요소에 상속되지만 'visibility'속성을 'visible'로 명시하면 자식요소는 보일 수 있다.
- CSS전환으로 요소의 표시 상태를 부드럽게 전환할 수 있습니다.
- ex) visibility를 hidden -> visible 로 점진적으로 변경 가능합니다.
Q. display: none 과 visibility: hidden의 차이점은 무엇인가요?
=> display:none은 해당 요소가 해당화면에서 완전히 제거되는 것을 뜻합니다. 완전히 제거 되는 것이기 때문에 요소가 차지하던 공간이 없어지고 다른 요소들이 그 공간을 차지합니다. 사용자의 이벤트도 전혀 받을 수 없고 css전환 또는 애니메이션이 작동하지 않습니다. 자식요소 또한 제거한것으로 판단이 되며 'display'속성을 설정하면 자식요소는 보일 수 있습니다. 비교해서 visibility : hidden은 요소를 보이지 않게 할 뿐 제거되었다는 뜻은 아닙니다. 눈에 보이지 않게만 만들었기 때문에 요소가 차지하던 공간은 그대로 유지되고 페이지 레이아웃은 여전히 영향을 받습니다. 뿐만아니라 이벤트 처리도 가능하며 css전환도 가능합니다. 자식요소는 부모요소의 영향을 받지만 'visivility'속성을 'visible'로 명시하면 자식요소는 보일 수 있습니다.
2. styled-components 장단점
장점
- 캡슐화 : 전역스타일 충돌을 방지, 컴포넌트 재사용 용이
- 동적 스타일링 : 프롭스를 기반으로 동적 스타일 적용 가능
- 유지보수성 : 스타일을 자바스크립트 파일로 포함 -> 컴포넌트의 로직과 스타일이 함께 있기 때문에 관리 용이
- 서버 사이드 렌더링 지원 : 서버사이드 렌더링을 지원하기 때문에 초기 로드시 스타일이 적용된 상태로 페이지 제공
- 자동 접두사 추가 : 웹브라우저가 아직 표준화 되지 않은 실험적인 css속성을 지원해주는 벤더 접두사를 자동으로 추가
단점
- 성능 저하 : 런타임에 스타일을 생성, 적용하기 때문에 많은 동적스타일링이 있는 경우 때때로 성능저하로 연결
- 번들 크기 : 자바스크립트로 스타일을 관리하기 때문에 자바스크립트의 번들크기가 커질 수 있음
- 학습 곡선 : styled-components를 사용하려는 사용자들은 학습 곡선을 경험
- 디버깅 : 생성된 스타일이 종종 추상화되고 동적으로 생성되기 때문에 디버깅의 어려움, 스타일 관련 버그를 찾고 해결하는 것이 더 복잡할 수 있음
Q.styled-components를 써보셨나요? 사용하면서 느낀 장단점에 대해 알려주세요.
=> 네 저는 다양한 작은 프로젝트에서 styled-components를 사용해 보았습니다. styled-components는 캡슐화를 통해 컴포넌트 재사용이 유리하다는 점과 프롭스를 이용한 동적 스타일링 적용이 가능하다는 점 자바스크립트 파일에 스타일이 포함되어 해당요소의 로직과 스타일을 한번에 확인을 할 수 있기 때문에 유지보수가 편리하다는점 등이 장점을 느껴져서 자주 사용했습니다. 하지만 사용을 하면서 약간의 불편함도 느꼈는데요. 처음 styled-component를 사용할 때 어색함을 느꼈습니다. 자바스크림트로 스타일을 관리하기 때문에 번들의 크기가 커지고 성능저하로 연결된다는 점과 동적인 생성으로 인해 디버깅의 어려움이 단점이라는 이야기를 들었지만 아직 체감하지는 못했습니다.
