[1105]오늘의 플젝 / 프론트구조 바꾸기

어제는 하루종일 모여서 디비 스키마 짜는 회의만 한것같다.. 

 

 

오늘 해야될거 - 프론트 구조 바꾸기

 

1. 상품 등록시 일반 구매 / 경매로 따로 나눠서 폼 작성

 

2. 새로운 상품 옵션 추가 

- 색상 / 사이즈 / 옵션1/ 옵션2 /수량/ 가격

- 근데 이 모든 옵션을 가지고 나올 수 있는 경우의 수들을

자바스크립트 코드로 만들라고 하심 -> why? 각 옵션별 수량과 가격을 알기 위해서

예를들어 색상 black / red 사이즈 s / m / l 가 있다고 하면 나올 수 있는 가짓수는

black - s / m / l  ,  red- s / m / l 이렇게 총 6가지.

자바스크립트 스킬로 자동으로 하위 엘리먼트가 생성되게 할 수 있다고 함( ul(색상) > li(사이즈) 이런식 )

 

 - , 기준으로 쪼개서 데이터 받기

 - 쪼개진 데이터 받아서 

 

3. 가격 컴포넌트도 상품등록 페이지에 아예 넣어야 함

- 이때 배포가 일어나는 상품등록임. 판매하기는 추후에 설정할 수 있도록 

 

 

---

💛 수정사항 💛

1. newRelease 컴포넌트 삭제

- fileInfo 컴포넌트 하나에 모두 합쳤음

 

 

 

 

 

 

---

1. 일반 판매 / 경매

- 판매 방식에 따라 입력폼을 달리주도록

최상위에서 state값을 줘서 연결해줌

 

2. 어제 완성했던 "개인정보 제공동의 체크 기능"

- 원래는 submit 버튼이 있던 agreeInfo 컴포넌트에서 체크기능을 구현했었는데

생각해보니 상위컴포넌트에서 props로 넘겨받은 함수도 사용을 해줬어야하는거임..

두개의 함수를 동시에 사용이 불가능했기 때문에

필요한 함수를 전부  최상위에서 만들어서 하나의 handleSubmit으로 함수들을 묶어서 한번에 넘겨주는걸로 함.

 

 

3. release > index.js 

const handleAgree = (num)=>{
        let newAgree = [...agree];
        newAgree[num] = !newAgree[num]
        setAgree(newAgree);
    }

요부분 어떻게 돌아가는지 원리  기억하기!

복사 -> 상태값으로 복사됨..!

이 전에 그냥 인자로 index 받아서 바로 setAgree 바꿔줬을 때는 console도 제대로 안찍혔었는데

이렇게 하니 제대로 찍힘.

이 상태로 agreeInfo에 props 넘겨줘서 작업하니 됐음.

 

agreeInfo > index.js

// 생략후 필요한 부분만
<input type="checkbox" id="agreeInfo" onChange={()=>{handleAgree(0)}}/>
<input type="checkbox" id="agreeCaution" onChange={()=>{handleAgree(1)}}/>

이런 식으로 인자를 넘겨줘서 각각 상태처리

 

 

리액트는 상위 컴포넌트에서 props를 만들어서 각각의 하위로 넘겨줘서 동시에 쓴다는게 엄청난 장점같음

상태값 하나로

이것저것 처리할수있어.. 대박