[LAB-9] state값이 바로 적용되지 않습니다

chaehaeun commented 1 year ago

질문 작성자

채하은

문제 상황

원하는 것

해당 컴포넌트 : components/Story/StoryWriter.tsx

다른 컴포넌트에서 배열을 임포트해온 후
프롭스로 넘어온 날씨 값과 대조해 같은 값인 객체를 찾아 스프라이트 이미지의 좌표를 찾고,
그 좌표를 테일윈드 명령어 형식으로 바꾼 뒤
클래스네임에 state 값으로 유동적으로 변경을 시키고 싶습니다.

현재 상황

bg값이 제대로 적용되지 않고 left0 top0 값만 적용됩니다. (가끔 제대로 적용될 때도 있습니다)
뽑아낸 값을 문자열 자체로 삽입하면 제대로 렌더링 됨을 확인할 수 있습니다.

단순한 해결 방법으로는 처음부터 종류 별로 테일윈드 명령어로 객체를 만든 후 프롭스 값에 맞춰 조건부로 삽입하면 될 것 같은데, 현재 사용한 방식으로는 해결할 방법이 떠오르지 않습니다...ㅜ 불가능할까요?

프로젝트 저장소 URL

https://github.com/chaehaeun/withPet-client.git feature/story 브랜치

환경 정보

운영체제 정보 window

Imjurney commented 1 year ago

문제 원인

@chaehaeun 님. 안녕하세요. 문의주신 로직을 분석해봤습니다. 한 번 정리해볼게요.

배열에 저장해놓은 좌표값들을 import해서 입력된 props값과 비교해 매칭되는 배열안에 매칭되는 객체를 찾아옵니다.
매칭된 객체의 좌표값들을 px 단위를 제외한 값만 추출합니다
좌표값들을 state로 관리해 props가 변경이 일어날때마다 그 값을 바꿔넣습니다.

..로 이해했습니다. "유동적인"이라는 포인트에 맞춰 구현하시려는 모습에 먼저 멋지다는 말을 드리고싶습니다👍

테일윈드는 정적 컴파일러입니다. 공식 홈페이지의 시작하기 부분을 보시면 나와있습니다.
동적 값을 넣을 수 있는 환경을 기본적으로 지원하지않습니다. 그래서 런타임 환경에서 바뀌는 값들이 제대로 적용되지 않았던 것입니다.

클래스명을 분기 처리하여 동적으로 스타일링을 설정할 수는 있습니다. styled-components와 같이 JavaScript 변수 값에 따라 가로 길이를 설정하는 등의 구현은 가능하지만 무척 번거로운 설정이 필요합니다. 테일윈드의 Utility-First Fundamentals 라는 컨셉에도 부합하구요.

문제 해결

입력받은 props 값에 따른 스타일링만 바꿔주는 형태라고 판단해 아래의 방법으로 접근해봤습니다.

객체 리터럴을 사용해 styles name: tailwindcss props 형태로 만들어 준 후, 객체 속성접근자를 통한 방법으로 접근해봤습니다. 아래의 방법으로 한번 시도해보세요 ^^ clsx나 classNames 같은 라이브러리를 사용하시지 않아서 공용 스타일도 같이 넣었습니다. 말씀드린 라이브러리를 사용하시면 여러 클래스들을 묶어줄 수 있기 때문에 추천드립니다.

//StoryWriter.tsx

type StoryWriterProps = {
  DiaryWeather: 'sunny' | 'rainy' | 'cloudy' | 'stormy' | 'snowy'
  userName: string
}

const DiaryWeathers = {
  sunny: 'w-10 h-10 bg-sprites_icon bg-[left_-124px_top_-104px] -125px -147px',
  rainy: 'w-10 h-10 bg-sprites_icon bg-[left_-83px_top_-108px] -84px -150px',
  cloudy: 'w-10 h-10 bg-sprites_icon bg-[left_-42px_top_-109px] -43px -151px',
  stormy: 'w-10 h-10 bg-sprites_icon bg-[left_-1px_top_-105px] -2px -148px',
  snowy: 'w-10 h-10 bg-sprites_icon bg-[left_-167px_top_-104px] -167px -146px',
}

const StoryWriter: React.FC<StoryWriterProps> = ({
  DiaryWeather = 'sunny',
  userName,
}) => {
return(
   ...생략//
  <div
        aria-label={'날씨 글자 삽입'}
        className={DiaryWeathers[DiaryWeather]}
      ></div>
    ...생략//
)}

아래는 제가 테스트해본 영상입니다.

https://user-images.githubusercontent.com/102623672/226980316-9f3a79cd-4253-4477-a4d9-c0b70c3c8541.mp4

chaehaeun commented 1 year ago

지원이 안되는 기능이라고 보는 것이 맞군요😭 답변 감사합니다!!!! 답변해주신 내용 적용시켜 무사히 작업 중입니다ㅎㅎ

yamoo9 / likelion-FEQA