Conversation
Siul49
left a comment
There was a problem hiding this comment.
고생했어! 컴포넌트 분리해서 넣는 것 좋았습니당
질문드리는건 이해의 정도를 파악하기 위해서 질문하는 것이니 아는대로 다 적어주세요!
| </div> | ||
| </section> | ||
| ) | ||
| } No newline at end of file |
There was a problem hiding this comment.
이 코드가 구동되는 원리를 상세히 적어주세용
useState쪽을 명확하게!
There was a problem hiding this comment.
버튼이 length길이(6)만큼 map(배열 메서드)으로 생성. 각 버튼마다 index_category라는 키가 입력됨(05).5는 카테고리의 id라 생각하면 쉬움.
0
그런데 0값은 false로 인식하기에 onClick으로 key값을 주는 handleClick에선 +1을 해서 모두 true로 바꿈.,
There was a problem hiding this comment.
usestate는 쉽게 말하면 기존의 값을 쉽게 변환하는 것임. 그래서 상수를 지정할 때 보단 지속적인 변화가 필요할 때 주로 사용함.기본 activeIndex의 값은 null로 지정, 버튼 클릭시 버튼의 값(index_category+1)값으로 변경.
버튼 클릭 -> 버튼의 index_category+1값을 handleClick에 넣음.
handleclick은 selected_index의 값이 존재하기 시작하면 트리거 됨. 이로인해 밑의 작업이 시행됨.
[onselect가 존재(true)한다면 onselect 값을 handleclick의 값으로 지정.]
이 부분은 정확하지 않을 수 있음
There was a problem hiding this comment.
if (onSelect) onSelect(selected_index);에 대해서 조금 공부해보면 좋을 것 같아~ 그러면서 콜백 함수에 대한 개념도 다져보자
There was a problem hiding this comment.
여기도 설명해주세용
onSelect가 뭔가요? {mode === 'category' && ()}이 구문도, 그리고
처음에 use client는 무슨 뜻인지도 알려주세용
그리고 export default function이 뭔지도 설명해주시면 감사하겠습니다~
There was a problem hiding this comment.
onselect는 home페이지에서->category페이지로 이동하기 위한 트리거 값임.
page.js를 보면 각 구성 js에 onselect={어떤 변수이름} 이런식으로 구성되어 있는데,
그 이름이 속해있는 const 값을 변화하기 위한 것임.
use client는 Image 때문이었던 거 같음. next js에서 최적화를 하기 위해 쓴다곤 하는데, 잘 모르겠음.
추후 배포를 위해 추가해놓음.
There was a problem hiding this comment.
onClick이 아니라 onSelect를 쓴 이유가 뭔가요?
또 {mode === 'category' && ()} 이부분도 설명해주시죠!
| <section className="relative w-full flex flex-col items-center justify-center bg-[#FFFCED]"> | ||
| <h2 className={"absolute w-full top-16 font-bold text-3xl text-center"}>카테고리</h2> | ||
| <div className={"relative top-30 bg-gray-200 w-[75%] h-65 grid grid-cols-6 rounded-2xl"}> | ||
| {Array.from({ length: 6 }).map((_,index_category) => ( |
There was a problem hiding this comment.
여기도 오류 방지를 위해서 id를 이용해서 구분해주시면 좋을 것 같아유 여기 제품 하나하나에 id를 부여해서 구분해주면 좋을 것 같아요
There was a problem hiding this comment.
나중에 DB에서 ID 긁어오면 그렇게 해보겠음.
일단 나중에 예비ID 함 적용해봄
모드로 페이지 구성 [home, category, product]
home:기존의 홈 상태
구성을 Nav, Main, Category(분리)로 변경
category:카테고리 선정 시 상품 화면
구성:Nav, Category, Product
product:상품 화면 내 상품 선택 시 이동
구성:Nav, Item
*현재 문제:배경이 일부만 색이 변경됨. useState가 정확히 이해하질 못함.