#배운것
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;
'TIL' 카테고리의 다른 글
TIL) 학습내용 점검: JS 풀스택 기술 익혀가는 중, 보완할 부분 매우 많음 (0) | 2022.05.28 |
---|---|
TIL) hook 개념 및 useEffect 사용법 (3) | 2022.05.28 |
TIL) 생활코딩 React delete (0) | 2022.05.15 |
TIL) 생활코딩 React update (0) | 2022.05.15 |
TIL) React State, Props, 알고리즘, StringifyJSON, TreeUI (0) | 2022.05.14 |