프라이탁 구현 연습중 map으로 뽑아낸 목록 3줄이 상품을 클릭했을때 해당 행의 바로 아래로 상품 상세 페이지가 펼쳐지는 것을 보고 구현해 보아야 겠다고 생각했다.
생각보다 쉽지 않았다.
맵을 돌리고 있는 가운데 이미지를 클릭했을때 그 map 요소들이 갈라지면서 상세페이지 박스가 들어가려면 map을 상품의 목록이 3줄이니까 map을 3단위로 쪼개야 된다고 밖에 생각이 들지 않았다.
x3
이렇게 코딩을 하니 생각대로 페이지가 갈라지며 상품의 상세 페이지가 구현되지만
< 데이터를 돌린 맵이 들어간 컴포넌트> +
<클릭한 상품의 데이터를 맵으로 돌린 상세페이지 박스가 들어있는 컴포넌트 > x 3 = "너무길다";
라는 결론이 났다.
계속계속 쪼개보자..
우선 한가지 데이터로 맵을 3번돌리고 있다.
그 각각의 맵은 id를 기준으로 1~8, 9~16, 17~24 데이터를 뽑아내고 있다.
내가 하고싶은건
<데이터를 돌린 맵이 들어간 컴포넌트> +
<클릭한 상품의 데이터를 맵으로 돌린 상세페이지 박스가 들어있는 컴포넌트> => 컴포넌트화
우선 props로 넘겨줄건 map으로 돌려지고 있는 data들, 상세페이지 박스를 열고닫는 함수들,
그리고 가장 중요한 id의 range!
우선 한 컴포넌트에 들어갈 두개의 map이 각각의 데이터의 id를 기준으로 뽑아내고 있다.
그렇기 때문에 
map의 삼항연산자 조건문에는
숫자범위를 0 < fury.id <9
이렇게 했다가 오류는 안뜨지만 목록 구현이 안되는 것을 보고
(됐으면 좋겠지만 안되겠지 당연히..)
{0 < fury.id && fury.id <9 && <컴포넌트/>}
이런식으로 map의 return 문 안에 들어갈 삼항연산자를
range를 props로 넘겨주는 식으로 완성했다.
return (
{this.props.rangenumone < fury.id &&
fury.id < this.props.rangenumtwo &&
<컴포넌트/>} )그리고 나서
rangenumone, rangenumtwo안의 들어갈 3개의 범위의 숫자를 저런식으로 배열에 넣어주고
각각의 컴포넌트에 배열의 인덱스를 다르게 하여 범위를 설정해 주었다.
그러니 여전히 다행스럽게 잘 작동하고 있다.
여전히 길어보이는건 기분탓이었으면 좋겠다.
이 작업을 하면서
아니 프라이탁은 대체 어떻게 한거지? 의문이 들었다.
추리를 해보기 위해 개발자 도구를 살펴보았더니 목록 한줄에서 첫번째상품을 first로 줄의 마지막 상품을 last로 명명한것을 보았다.
여기도 혹시 map을 3 버 ㄴ..?
혹시 내가 너무 비효율적으로 생각한게 아닌가 싶기도 하지만 내 머릿속에서 어렵게라도
짜낸 코드를 구현하고 또 리팩토링 했다는 것만으로도 의미를 주고싶다..ㅎ
더 효율적인 방법이 있을지 궁금해졌다.
