[React] Singulart clone project | javascript Hover

javascript Hover 구현하기
이전 1차 프로젝트에서도 진행했던 기능이지만 Hook을 이용한 로직을 구현하다보니 너무 새로워보였다.
styled-components 사용시 props로 받는 개념도 짚고 넘어가야했다.

   // *처음 피드백을 받고 구현한 로직 : 이벤트 메서드와 Boolean값을 이용했다
  // onMouseEnter={() => setColorHover(true)}
 // onMouseLeave={() => setColorHover(false)}
// colorHover={colorHover}

시행착오 최종

return (
     {artData.map((artinfo, idx) => {
          const props = {
            key: artinfo.id,
            hover: hover,
            colorHover: numIdx === idx,
            onMouseEnter: () => idxHandler(idx),
            onMouseLeave: () => idxHandler(-1),
          };

          return (
            <ArtFragment>
              <Liner />
              <ImgBox imageUrl={artinfo.thumbnail_url}>
                <Hover
                  {...props}
                />
                <Shadow />
              </ImgBox>
              <ArtName {...props}>
              

시행착오 1

  const idxHandler = index => {
    setNumIdx(index);
    setHover(!hover);
  };

  const hoverHandler = status => {
    setHover(status);
  };

return (
  <Hover
  key={artinfo.id}
  colorHover={numIdx === idx && 'colorHover'}
  onMouseEnter={() => idxHandler(idx)}
  hover={hover}
  onMouseLeave={() => hoverHandler(true)} />
           
  <ArtName
  key={artinfo.id}
  colorHover={numIdx === idx && 'colorHover'}
  onMouseEnter={() => idxHandler(idx)}
  hover={hover}
  onMouseLeave={() => hoverHandler(true)} />
              

시행착오 2

return (
<Hover
  key={artinfo.id}
  colorHover={numIdx === idx}
  //빈문자열, 0 false
  onMouseEnter={() => idxHandler(idx)}
  hover={hover}
  onMouseLeave={() => idxHandler(-1)}
  />
  <Shadow />
  </ImgBox>          

+a | Styled Components에 props내려주기

 /* background-color: ${props => props.colorHover && props.theme.primaryColor};
  opacity: ${props => props.colorHover && 0.7}; */
  ${props => {
    if (props.colorHover) {
      return css`
        background-color: ${({ theme }) => theme.primaryColor};
        opacity: 0.7;
      `;
    } else if (props.colorHover) {
      return css`
        opacity: 0;
      `;
    }
  }}

  /* bottom: ${props => (props.colorHover ? '20px' : 0)}; */

  ${props => {
    if (props.colorHover) {
      return css`
        bottom: ${props => props.colorHover && '20px'};
      `;
    } else if (props.colorHover) {
      return css`
        bottom: ${props => props.colorHover && '0'};
      `;
    }
  }}