오랜만에 질문드립니다~!

[이도현]

선생뉨 안녕하세요 !! 쇼핑몰 내에 이런저런 것들을 추가해보고 수정하고 있는중입니다!

 

Q. style에 관련한것을 app.js에서 로직으로 처리해도 되나요?

->

img 위에 마우스을 올렸을때 이런저런것을 해라!  를  css :hover로 처리했는데 
이후 div , img 등 여러 항목이 한 위치에 겹치다보니 부모자식 관계도 이미 다 만들어져서 처리하기가 너무 어려워서
해결할것은 해결하고 마지막 1개 div에 대해서만 

 const [moreStyle,setMoreStyle] = useState(false);
  const fuckk = () => {    
    if(moreStyle){
      return {backgroundColor : "white" , color: "black"}
    }
  };

<div className="main-content__img-wrap"
  onMouseOver={()=>{setMoreStyle(true)}}
  onMouseOut={()=>{setMoreStyle(false)}}>
</div>

 <div className="main-content__text-more" style={fuckk()}>보러가기</div>|

이런식으로 로직으로 처리했습니다.

제가 어디서 문득 보기로는 로직과 디자인이 섞여있는 코드가 안좋은 코드다... 라고 본거같아서요.. ㅠ.
보기에도 복잡스럽고 그래 보이긴하네요.. 괜찮을까요 ?

 

[codingapple]

style 속성 안에 삼항연산자써도되겠는데요

state가 true면 이런 스타일을 남겨라라고 쓰면 덜복잡할듯요

저게 가장 간단하고 좋은 방법같은데요 스타일이 길어질거같으면 css class로 만들어두는게 좋습니다

[이도현]

 해도되는군요 ㅠㅜ 감사합니다 선생뉨!

매번 어디서 이렇게 나타나시는지 궁금하네요ㅋㅋㅋㅋ

[글쓴이]

글