리액트 숙련주차 개인과제

조건부 스타일링

나의 생각

이번 과제에서 home 화면의 팬레터를 클릭하면 해당 팬레터들 삭제하거나 수정할 수 있는 상세페이지로 이동한다.
이때 팬레터의 UI는 거의 동일하다.

그렇기에 앞서 팬레터 UI를 그려주기 위해 만든 PrintLetter 컴포넌트를 재활용해 보고 싶었다.
각 속성의 값에 대해 조건부로 스타일링하는 건 강의 영상을 통해 학습했다.

width: ${({ size }) => (size === "home" ? "450px" : "900px")};

문제의 발생

하지만 이 이상으로 home 화면에서는 hover가 필요했지만 상세페이지에서는 필요하지 않았기 때문에 이를 나눠줄 방법이 필요했다.
고민 끝에 결국 튜터님께 조언을 구했다.

해결 방안

styled-components에서 css를 import 해와서 props에 따라 속성도 지정해 줄 수 있었다.

 ${({ size }) => {
    if (size === "home") {
      return css`
        cursor: pointer;
        &:hover {
          color: #ff0055;
          border: 5px double #ff0055;
        }
        margin: 10px auto 10px auto;
      `;
    } else {
      return css`
        height: 300px;
        margin-top: 100px;
      `;
    }
  }};

리액트에서 background-image 넣기

일단 props-drilling branch에서 구현할 기능을 다 구현한 후 css를 좀 다듬었다.
처음 했던 게 헤더 부분에 백그라운드 이미지를 넣는 것이었다.

background-image: url("../assets/header.jpeg");

문제의 발생

헤더의 styled component에서 평소 백그라운드 이미지를 넣을 때처럼 url 주소를 상대 경로로 지정하였으나 적용되지 않았다.
url 주소를 그냥 이미지 주소를 넣어서 해버릴까 하다가 다음에 내가 필요한 사진이 인터넷에 없고 내가 가지고 있으면 어쩌나 하고 방법을 찾아봤다.

해결 방안

이 방법 저 방법 사용하면서 검색을 해보니 이미지를 사용하려면 일단 이미지 파일을 사용하는 컴포넌트로 import 해와야 한다.
그리고 그 이미지를 ${}를 이용하여 감싸서 url에 넣어야 한다.

import headerImg from "../assets/header.jpeg";

background-image: url(${headerImg});