리액트1 [React] Styled-Component 조건부 스타일링 적용하기 커뮤니티 사이트에서 게시글을 검색했을 때, 해당하는 게시글이 없으면빈 화면 대신 게시글이 없음을 알리는 컴포넌트를 렌더링 하는 방식으로 UI를 수정했는데 이런 식으로 컴포넌트가 너무 붙어있는 느낌이라 margin-top 값을 주려고 했다.(캡쳐본으로 보면 적당해 보이지만 실제 화면상으로는 너무 여백이 없는 느낌) 근데 생각해보니 컴포넌트 margin-top 값을 수정하면 다른 경우에 해당 컴포넌트를 사용할 때 margin-top 값이 너무 크게 느껴질 수도 있을 것 같아서우측에 보이는 최신순 정렬 탭에 조건부 스타일링을 적용한 다음 데이터가 있으면 margin-bottom 값을 원래대로 적용하고, 데이터가 없으면 margin-bottom 값을 늘리도록 하는게 좋겠다고 생각했다 스타일 컴포넌트로 조건부 .. 2024. 5. 11. 이전 1 다음