[TIL] 내일배움캠프 React 과정 2023.03.04

Today I Learned

• lighthouse로 성능 개선하기
• 마이페이지 CSS 수정

 

---

styled-components 페이지에 따라 조건부 스타일링하기

회원가입 페이지 / 마이페이지

관심 카테고리 설정을 할 때 같은 컴포넌트를 재사용하고 있는데 어떤 페이지에서 사용하는지에 따라 스타일링을 다르게 주고 싶었다. 회원가입 페이지의 경우에는 해당 컴포넌트 container의 padding과 box-shadow 값을 없애고 싶었다.

 

어떻게 할까 고민하다가 router 정보를 props로 전달하고 삼항연산자로 처리하는 방식으로 해결했다.

 

const router = useRouter();
...
<S.CategoryContainer path={router.pathname}>

일단 컴포넌트 내에서 Next.js에서 제공하는 useRouter의 pathname 정보를 해당 styled-components에 props로 전달한다.

 

export const CategoryContainer = styled.div<{ path: string }>`
  box-shadow: ${(props) =>
    props.path === '/signup' ? 'none' : '0px 4px 4px rgba(0, 0, 0, 0.25)'};
  padding: ${(props) => (props.path === '/signup' ? 0 : '19px')};
  border-radius: 20px;
  margin-bottom: 35px;
  background-color: white;
  width: 100%;
`;

그리고 props로 받은 path가 '/signup' 즉 회원가입 페이지일 때 box-shadow와 padding을 없애도록 처리했다.

 

<SelectMyRegion width={'100%'} path={'/signup'} />

+) 생각해 보니까 굳이 router.pathname 사용하지 않고 사용하는 컴포넌트에 따라 임의로 props를 넘겨주면 된다..

 

 

overflow-y 속성 

overflow-y: auto;

• visible: 특정 요소가 박스를 넘어가더라도 그대로 보여준다.
• hidden: 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리한다. (세로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 가로 스크롤바는 나타남)
• scroll: 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인할 수 있도록 스크롤바를 표시한다. (세로 스크롤바 항상 표시)
• auto: 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인할 수 있도록 스크롤바를 표시한다. (내용이 넘칠때만 세로 스크롤바 표시)

 

그동안 scroll 속성만 이용하다가 auto를 적용하면 내용이 넘치지 않을 대는 스크롤바를 없앨 수 있다는 것을 알게 됐다..! 😯

 

출처 https://electronic-moongchi.tistory.com/62

 

---

회고

오늘 인프런 성능 개선이나 메타 태그 강의를 팀원들과 함께 보고 직접 프로젝트에 적용도 해봤다. 그리고 vercel에서 dev 브랜치용 도메인을 추가해서 개발 단계에서 배포한 것을 확인해 볼 수 있게 되었다! 또 오늘은 분양모음집의 도메인을 구매한 역사적인(?) 날이기도 하다 ㅎㅎ 아직 중간발표 이후의 작업 내역은 반영되지 않았지만 도메인 자랑하기!

 

메인페이지<!-- --> | 분양모음집