이번 스프린트는 정식스프린트가 아니라 테스트 항목이 없었다.
React Hooks 를 공부하는 용도로 실습하였다.
대부분의 기능은 구현되어 있었고, 각 컴포넌트를 훅을 이용해 연결하는 게 주 내용이다.
😎 스프린트 파악하기
- 우선 페이지는 2가지로 구분되어 있었다.
- 상품을 볼 수 있는 페이지
- 장바구니 페이지로 구분되어 있다.
우측상단에 상품리스트와 장바구니를 누르면 이동이 가능하다.
😎 스프린트 진행
- 선택한 아이템 장바구니로 넘기기
최상위 컴포넌트인 App에 상태코드가 아래처럼 이미 작성되어있었다.
const [items, setItems] = useState(initialState.items);
const [cartItems, setCartItems] = useState([]);
상품을 클릭하면 cartItems 를 업데이트 하고 싶었다.
하위 컴포넌트에 마우스핸들러 함수가 있어서 왜 여기에 있을까 하고
굳이 App으로 땡겨와서 만들었다.
나중에 생각해보니 혹시 setCartItems도 props로 내려줄 수 있는건가 의문이 들었고, 다시 하위 컴포넌트로 옮겨서 props 를 넘겨주니 잘 작동하였다.
set관련 함수도 props 도 넘겨줄수 있다! (이게 제일 큰 수확이었다!)
- 상품을 누르면 장바구니에 물건숫자 ++
화면상 상단을 담당하는 Nav 컴포넌트에 cartItems수를 props로 넘겨줘서
숫자가 변경되게 연결시켰다.
- 이미 장바구니에 있으면 숫자 안올라가게 제어
누를 때마다 같은 아이템이 이미 있어도 올라가서, 그 부분은 1번에서 작성한 핸들러에 조건문을 추가해줬다. 즉, 같은 아이템이 있으면 숫자가 더 올라가지 않게 구현했다.
(나머지 부분은 props를 내려주고, 아래쪽에서 상태가 바뀌면 업데이트하게끔 하니까 웹 앱이 잘 작동하였다.)
😎 후기
스프린트를 다 완성하고 보니, useEffect를 쓰지 않았다는 것을 깨달았다.
훅연습겸 공식문서에서 배운 걸 다 활용하고 싶었는데, 아쉽다는 생각이 들었다.
그리고 의문이 들었다. 왜 사용하지 않아도 되는지?
그래서 문의를 통해 대답을 들었다.
useEffect는 보통 fetch를 하는 경우에만 쓰인다. 따라서 쓰지 않고 완성하는 것이 자연스럽다.
사실 리액트를 이용해서 과제를 할때 componentMount 관련 메소드를 사용한 적이 없었다. 그래서 혹시 마운트관련 메소드를 사용하는 게 더 편한데 내가 활용할 줄 몰라서 못썼던 걸까 라고 생각했던 의문이 다 해소되었다. 다음에 fetch를 사용할 일이 있을 때 꼭 써먹어야겠다. 질문하길 잘 했다는 생각이 들었다.
그리고 또 의문. 상태를 전역으로 사용했다. (쓸데없는 props drilling)
편한데 성능적으로 비효율적이라고 생각했다.
그래서 이 부분도 이렇게 코드를 작성해도 되는지 질문했더니.
그게 리액트의 단점이라면서, 이를 보완하기 위해 다음에 리덕스를 배운다고 한다.
다른 스프린트 리뷰시간에도 궁금했던 점을 해소하면서 즐거움을 느꼈었는데, 이번 시간에는 특히 더 좋았다.
의문을 가지는 게 당연하고, 그 의문이 해소되고, 다음시간에 그 의문을 보완하는 기술을 배울 수 있다니. 커리큘럼 진짜 멋지다.
요즘에 과제를 진행하면서 에러를 만나면, 이 에러를 만나게 코드스테이츠가 설계했다는 생각이 든다. 실제로 질문게시판을 보면 다들 나랑 똑같은 에러로 고민을 하고 있다. 그리고 그 에러를 해결하는 과정이 피와 살이 된다. 코딩공부를 시작하려는 사람이 있다면 코드스테이츠 강추한다.
