Product Detail
⚡️ FUNCTION
- 디테일 페이지 컴포넌트화
- sub 이미지들을 각각 클릭시 해당 이미지로 이미지 전환
- 추가구성까지 선택 후 선택된 옵션 & 수량선택 up down 버튼이 나타나도록 구현
- 수량 1개 미만 선택시, alert 창과함께 수량 1로 기본셋팅
- 각 상품 옵션에 따른 재고 정보(품절) 제공
- access_token을 이용해 회원가입한 사람만 ADD CART할 수 있도록 구현
💭 PART OVERVIEW & TIL
리액트 컴포넌트로 나누는 것부터 힘들었고 잘게 쪼갠 컴포넌트들을 다시 합치고 수정하면서...
'이래서 state는 부모 컴포넌트에서부터 시작되어야 합니다, 리액트는 단방향 flow입니다' 라는 말을 멘토님들로부터 열번은 들었던 것 같다.
컬러/사이즈/추가구성별로 다 다르고 상품 카테고리 별로도 다르고 모든 것을 크게 생각하고 고려해야했던 PART..옵션을 선택할 때 onChange안에 담기는 한 함수안에서 선택한 옵션이름도 담아줘야하고, 배열에도 담아줘야하고, 칼라박스 테두리도 나타나게 해야하고 고려해야할 게 많았다!
너무 세분화된 것은 생략하기로 하고(코드카타 10년치 문제입니다 by종택님) 최소한의 기능은 구현해보도록 했다.
1. ref로 DOM 요소 접근하기
1차 진행상황 발표 때 기억하고 싶은 코드를 각각 공유했었는데 이 때 나는 상품디테일 페이지에서 ref 를 이용한 코드를 공유했었다. 하지만 추후 ref의 사용에 부합하는 코드는 아니었다는 멘토님의 가르침을 받고 ref는 나의 코드에서 지워졌지만... (좋은 시도였다 (꒦ິㅂ꒦ີ)) 새로운 개념을 배웠다는 점에서 기쁨을 느꼈으니 됐다! 처음에는 어떻게 사용했는지 공유하고 싶고, 그렇다면 정확한 ref의 사용목표는 무엇인지에 대해 정리하고자 한다.
JS에서는 쿼리설렉터를 이용해서 원하는 요소에 값을 줄 수 있는데,
React에서도 REF 라는 것을 이용해서 DOM Node에 접근할 수 있었다.
상세페이지에서 색상을 선택했을 때, 선택한 색상 박스에 굵은 테두리가 생기는 것을 구현하기 위해서 사용했다. 선택하고 다른 박스로 넘어가면, 원래 선택했던 컬러의 보더는 없어지게 해야했던 것이 관건이었다.
className을 추가하고 빼면 될 것 같은데 toggle을 쓰면 되나?
=> 이건 원래 선택한 컬러 박스를 다시 눌렀을 때 없어지게 하는 것이지, 유저가 원래 클릭한 색상을 다시 친절하게 누른 다음 다른 색상을 클릭하진 않는다.
그래서, ref라는 것을 이용해보기로 했다.
자식을 수정하려면 새로운 props를 전달하는게 보편적이지만, 일반적인 단방향 flow에 벗어나 직접적으로 자식을 수정해야 하는 경우도 있다. 이 경우 ref를 이용하여 직접 DOM Node에 접근할 수 있다.
map을 돌려 나온 여러개의 컬러 박스들을 담은 하나의 div 박스안에 ref를 선언해주고, console.log에 ref.current.children을 하면 해당 images들이 잘 담겨져있는 것을 볼 수 있다.
여기서 for 문을 이용하여 각각의 선택된 요소에 보더값을 설정한 클래스 이름을 빼고, 다시 해당 선택한 보더에 클래스네임을 추가하여 내가 지금 선택한 색상의 보더에만 값이 적용될 수 있도록 구현했다.
하지만 !
이 경우는 ref의 사용목적에 부합하지 않을뿐더러 state 값을 이용하여 core한 것만 값을 구한 후 이용할 수 있었다. 보여질 수 있고 가공할 수 있는건 state에 넣지말자
내가 쓴 경우는 UI가 바뀌는 렌더링이 계속 된다. 지금은 기능이 간단하지만 만약 코드가 중간에 복잡해지면 꼬일 수 있는 경우이다.
DOM 요소에 접근해서 쓸 수 있다는 것만 생각하여 리액트 전체의 목적을 볼 수 없었다.
목적있게 사용하자.....
React Ref에 대해 알아보자
https://ko.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
2. state의 비동기적 특징 해결 하기 by call back function
React의 비동기적특징을 다시 한 번 느낄 수 있었던 부분을 공유하고자 한다
(feat. call back function)
팀원들과 스터디 후 밥먹으러 가는 길...function...이런건 또 지나칠 수 없지
컬러를 먼저 선택해보면, 들어가야할 value 값은 빈 string으로 출력된 것을 볼 수 있다. 즉, 각각의 옵션을 선택하면 선택한 값들이 바로 value에 출력되어야 하는데 콘솔을 찍어보면 이렇게 하나씩 밀려서 출력된다.
console.log를 함수 실행 후 찍어보면 여전히 밀려서 찍히는 것을 볼 수 있지만, 콜백함수로 동시에 실행시켜주면 value가 선택했을 때마다 잘 찍히는 것을 볼 수 있다.
이 또한 컬러만 선택했을 때와 console.log를 콜백함수로 실행시켜주면 사이즈 선택시 동시에 잘 담기는 것을 볼 수 있다.
잘 들어왔는지 확인! 이처럼 콜백함수를 이용하여 비동기적 특징을 해결해보자
2. 모든 연산자는 booleans로 나타낼 수 있다
true :
1,'hello','false'(string),[]
false :0,NaN,'',null,undefined
데이터가 없고 비어있는 것은 false이지만, 비어있는 배열(array)은 object 자체이기 때문에 제외이다.
state = {
activeName: null,
value : ''
valueLists : [],
selectedColor: '',
}이와 같은 성질을 이용하면, state 값 하나로도 두 가지를 해결 할 수 있다.
함수에 새 parameter를 추가해주면서 name으로 인자받은 부분은 selectedColor의 value가 출력되도록 사용할 수도 있고, name이 인자값으로 들어오면 빈 ''에서 데이터가 들어오기 때문에 false에서 true로 변한다. 즉, value와 selectedColor을 한 번에 합칠 수 있다.
changeColor = (e, index, name) => {
this.setState({
value : name,
valueLists : [...valueLists, name]
selectedColor: true,
activeName: index,
});
};
또한 처음에 배열로 담아서 리턴해야겠다 생각해서, 배열로 valueLists[0]valueLists[1]..이런 식으로 출력되게 하려했지만 너무나도 불안정한 속성! 그냥 간단하게 {selectedColor}{selectedSize}{selectedBundle} 만 해줘도 되었다.
Refactoring
changeColor = (e, index, name) => {
this.setState({
selectedColor: name,
activeName: index,
});
};
데이터 타입은 자바스크립트를 공부한지 첫 날에 정리했던 내용인데 이렇게 무궁무진하게 응용되어 사용할 수 있다는 점에 깨달음을 얻었다...
- 모든 연산자는 booleans로 나타낼 수 있다
- 콜백함수와 함수 parameter를 잘 쓰는 연습을 하자
3. state 끌어올리기
흩어진 정보들을 한데 모아 백으로 데이터들을 보내줘야할 때 너무나도 고민했었던 부분에서 이 개념을 이용하여 해결할 수 있었다. 따로 다뤄볼예정..! Stay tuned for the next chapter...४'ٮ'४
