사이드 프로젝트 9편 | 레시피 상세 페이지 (조건부 스타일링, props error 해결)

 

💡 레피시 상세 페이지

• 현재 상황 : 
  • 페이지 마크업, CSS 스타일링 완료
  • 레시피별 단계 화면에 출력하기 완료(mock 데이터)
• 다음 과제 : 
  • 레시피 저장하기 기능 추가

 

어려웠던 점

컴포넌트 재사용

1. 목표 : RecipeCard 컴포넌트 재사용하기
2. 상황 : 
   
   • RecipeCard 컴포넌트는 클릭 이벤트와 CSS가 각 페이지 마다 다름 
     • 선택 페이지 : hover시 그림자가 생김, 클릭시 상세페이지로 이동
     • 상세 페이지 : hover시 그림자가 없음, 클릭시 반응 처리 없음
3. 분석:
   1. 이벤트는 props를 이용해서 조건문으로 처리하면될 것 같은데 CSS에 조건을 걸어서 적용하는 방법을 모르겠다.
4. 해결법
   • 조건부 스타일링을 사용한다. 
     • isDetail 이라는 스타일 props를 내려받고 해당 값에 따라 CSS를 다르게 적용시킨다.

 

 

발생한 오류

위와 같은 방법으로 isDetail으로 props를 전달하면 아래와 같은 경고문이 뜬다.

Warning: React does not recognize the `isDetail` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isdetail` instead. If you accidentally passed it from a parent component, remove it from the DOM element

 

리액트는 DOM 요소에서 isDetail property를 인식하지 않는다.
만약에 의도적으로 사용자 정의 속성으로써 DOM에 표시하려면 isVisible 대신 소문자 스팰링을 써라.
만약 부모 컴포넌트로부터 실수로 전달했다면 DOM 요소에서 삭제해라.

즉 React는 DOM 요소로 전달되는 모든 props들이 유효한 HTML 속성이어야 하는데
정의되지 않는 속성을 사용하려니 경고문이 뜬 것입니다.
React는 camelCase로 DOM 속성으로 인식하는데
isDetail처럼 camelCase의 속성 이름은 button요소의 속성으로 들어가게 됩니다.

 

해결 방법

1. @emotion/is-prop-valid 패키지를 설치하고 StyleSheetManager를 사용
2. transient props(prefix `$` 키워드)를 사용해서 해당 prop을 필터링하면 DOM으로 전달되지 않습니다.

저는 간단하게 선언부와 호출부에 isDetail 대신 $isDetail로 작성하여 경고문을 없앴습니다.