여러 이미지를 호버하여 이미지를 변경할때 type 정의

상태의 타입이 까다로운 구조를 가진 객체이거나 배열일 때 

 

interface PropsType {
    cat: boolean;
    dog: boolean;
    pig: boolean;
}

 

1. 타입정의후

 

const [isHover, setIsHover] = useState<PropsType>({
    cat: false,
    dog: false,
    pig: false,
});

 

2. 재네릭으로 타입을 정의해 주고 기본값 세팅

 

 

  const handleImgChange = (x: boolean, y: boolean, z: boolean) => {
        setIsHover({
            cat: x,
            dog: y,
            pig: z,
        });
    };

 

3. 마우스 오버시 함수

 

   <li onMouseEnter={() => handleImgChange(true, false, false)} onMouseLeave={() => handleImgChange(false, false, false)}>
                        <div>
                            <img src={isHover.cat ? cat_hover : cat} alt="" />
                        </div>
                    </li>

4. 마우스 오버시 값과 마우스아웃시 값을 세팅해 준다.

 

데이터 타입 정의하기 (2차원 배열)

 

interface Info {
    id: number;
    img?: string;
    title: string;
}
interface category {
    category: string;
    content: Info[];
}

 

첫번째 Info를 category 안에 content 타입으로 넣어준다. 배열이므로 []를 붙여줘야 한다.

 

map안에서 ref를 사용할 때

 

배열인 경우에는 제네릭을 명시하는 것이 좋다.

 

const refs = useRef<Array<HTMLDivElement | null>>([]);

 

1. ref type 정의

 

ref={(el: any) => (refs.current[idx] = el)}

 

ref={(el: HTMLDivElement | null) => {refs.current[idx] = el}} 👌

 

2. ref사용하기

 

++++++여기서 el의 타입은 뭘로 해야할지 아직 감을 잡지 못했다..😂

++++++타입을 제대로 적어도 오류가 나서 확인하여 보니 ref 콜백함수는 반환값이 없어야(void) 하는데 작성한 콜백에서 el를 그대로 리턴해서 반환값타입에서 오류가 났던 것이었음

반환값이 없도록 중괄호 {} 를 사용하여 오류를 해결했다.

 

할당식 결과를 반환하는 함수가 아니라면 화살표 함수로 변경하여도 된다.👍🙌

 

참조: https://ui-tricks.tistory.com/95

참조: https://velog.io/@velopert/using-hooks-with-typescript