더보기 버튼

1.상황

계속해서 프로젝트가 진행되면서 하나를 완성했다고 끝이 아닌 새로운 기능이 추가가 되었다. 그래서 갑자기 나에게 배정된 제품 상세보기!

상품을 비교해주는 사이트라 거기에 집중을 한다고 제품을 하나하나 보고 싶다면 볼수있는 페이지가 없었다.

상품을 확인하려면 무조건 2개이상 비교를 해야지 가능한 상황이였다.

상품들의 리스트 작업을 하고 있었기 때문에 리스트를 눌렀을때 바로 밑에 기존의 리스트가 늘어나면서 안에 상세내용이 나올 수 있도록 토글? 같은 형식을 만들기로 추가가 되었다.🔥

 

2.내가 만난 문제

토글형식으로 제품의 상세보기를 만든다?라고 했을때 괜찮을 꺼같았다. state를 주고 그 값이 true일때 밑에 상세보기가 나올 수 있도록 하면 될 줄 알았다.

const [toggleBtn,setToggleBtn]=useState(false)

const toggleHandler=(id)=>{
//data:상품의 리스트

data.forEach((item)=>item.id===id?setToggle(true):null)}

<button onClick={toggleHandler(item.id)}/>

아이디값을 넘겨주고 setToggle~ 하고 기능을 다 만들었는데 아듸값을 넘겨줘도 모두가 열렸다.

반나절을 이 버튼 하나때문에 애먹었던것같다.

 

3.해결

click시 리스트의 id는 넘어가고 있었지만 리스트 속성안에 toggle:false라고 지정이 되어 있지 않았다.

그래서 해당하는 리스트만 toggle을 false로 바꿀 수 없었다. ㅜ

state가 변경이 되다보니 이 state를 가지고 있는 모든 리스트들의 토글이 열리는 상황이였다.

그래서 해결한 방법은

const [toggleBtn,setToggleBtn]=useState("")

onClick={()=>setToggleBtn(item.id)}

{toggleBtn=== item.id? <상세보기 열리기> : null}

 

리스트의 item값 자체를 state에 넘겨주고 그 state가 클릭한 item.id와 일치하면 해당하는 상품의 상세보기가 나오도록 해결을 했다.

 

4.깨달은 점

저렇게 만들고 굉장히 기뻤는데

생각해보니까 자세히버튼을 눌렀을때 item.id가 넘어가는데 다시 누르면 닫히는 toggle이 안되었다ㅋㅋ

그래서 눌렀을 때 자세히 라는 글씨를 없애고 닫기 버튼이 나오도록 만들까 생각하고 있다.