본문 바로가기

TIL

TIL) useState 통해서 상태 업데이트 할 때 String 타입으로 변경

#배운것

useState를 통해서 state 값을 업데이트할 때는 상태값이 string으로 변한다.

 

따라서 if 문을 통해서 업데이트 한 상태값을 비교해주는 경우, 타입 변환을 하거나

 

느슨한 비교를 사용하자.

**썸네일 컴포넌트**
import source from '../data/images'
import Gallery from '../page/Gallery'

function Thumbnail(props) {

  return <>{source.map((e) => {
    return <a><img id={e.id} src={e.src} className="thumbnail" onClick={event=>{
      // event.preventDefault()
      props.onChangeMode(event.target.id)
    }}/></a>
         })
       }
  </>

}

export default Thumbnail;

**갤러리 컴포넌트**
import { useState } from 'react';
import source from '../data/images'; // 제공되는 이미지를 이용하세요
import Thumbnail from '../component/Thumbnail';

function Gallery() {
  // console.log(images) // npm start를 통해 앱을 열어, 개발자 콘솔을 통해 이미지 목록을 확인할 수 있습니다

  const [picture, setPicture] = useState(source[0].id)

  const handleClick = (id) => {
    // TIP: parameter로 이미지가 전달되어야 하며, 이벤트 객체는 쓰지 않습니다
    // TODO
    setPicture(id)

  };

  let title, imgSrc = null;

  for(let i =0; i<source.length; i++){
    if(source[i].id == picture){ //문제 해결 파트
      title = source[i].alt
      imgSrc = source[i].src
    }
  }

  return (
    <div>
      <h2>전체 목록</h2>
      <div id='list' className='flex'>
        {/* TODO /}
        <Thumbnail onChangeMode={_id=>{
          handleClick(_id);
        }}/>
      </div>

      <div>
        {/ TODO: 아래 하드코딩된 내용 대신에, 목록 선택에 따른 이미지를 표시하세요 */}
        <h2>{title}</h2>
        <img src={imgSrc} id='current-image' />
      </div>
    </div>
  );
}

export default Gallery;