네이버 블로그를 옮기는 글
"장바구니 버튼을 눌렀을 때, 모달창 만들기"
React Portal를 이용해서 모달창을 만들어보자
공부 한 적은 있지만, 실제로 적용해서 사용해보기는 처음이다
시작하기에 앞서, index.html에 portal로 갈 수 있는 태그를 루트 내에 생성하여 id를 줬다 (여기에서는 overlays-modal)
그 다음, 모달 컴포넌트 내에서 리턴에 createPortal을 이용하여 렌더링될 부분을 첫번째 인자로 넣어주고, 두 번째에는 포탈을 통해 이동할 부분을 넣어준다(overlays-modal은 id로 넣어줬으니 getElementById로 사용)
여기서 맨 위를 보면, if(!isCartOpen) return null;이 있는데, isCartOpen은 내가 만든 boolean 상태이고 장바구니 버튼이 눌렸을 때는 true, 눌리지 않았을 때는 false가 된다!
그래서 false일 때는 모달을 띄우지 않는다는 말임
모달에 디자인을 넣어줘야겠지
모달 컴포넌트를 감싸는 div에 overlays라고 클래스네임을 줬고, 그 안에 하얗게 보여질 부분은 modal-container라고 클래스네임을 만들어 줬다!
이 부분은 유튜브에 있는 react 채널 영상을 보고 따라했다
overlays 부분은 반투명하면서 어둡게 깔릴 배경을 담당하고, modal-container 부분은 하얗게 모달로써 보여질 부분을 의미한다
백그라운드는 빈 부분 없이 꽉 채워져야 하니 top, bottom, right, left 모두 0으로 설정한다
당연히 제일 위에서 보여야 하니 position: fixed와 z-index까지 1000으로 설정해버리기!
modal-container는 가운데로 와야 하니 top과 left를 50%로 설정한다 하지만, 오른쪽으로 치우치지 않고 정가운데로 오게 하면 transform: translate(-50%, -50%)을 넣어줘야 함
(여기서 height은 설정해주지 않는 것이 좋은 거 같다. 높이 설정을 해버리면 화면의 크기마다 높이가 이상하게 보일 수 있음)
"가격 단위를 1000마다 comma를 붙여주고 싶다"
장바구니 아이템의 가격 단위를 그냥 쓰는 것이 아닌 원 단위로 붙여주고 싶었기에 천 단위로 바꿔줄 메서드가 필요했다
가격.toLocaleString() 으로 안에 인자 없이 호출하면 바로 천 단위로 comma 붙여줌 릴리굿 :)
"중복되는 방법의 함수가 생겨 커스텀 훅으로 만들어보자"
모달에서 -, + 버튼을 누를 때나 장바구니에 넣기 위해 추가하기 버튼 등을 구현하기 위해서는 계산하는 함수가 필요하다
하지만 쓸 때마다 비슷한 함수를 계속 만들어내는 것은 낭비라고 생각이 들어 custom hook을 만들어 보려고 한다
커스텀 훅은 처음 만들어보니 간단하게 시작!
비슷하지만 여러 번 쓰이는 계산식의 함수들
hooks라는 폴더를 만들어서, useCalculate라는 파일을 만들어 줬다
이 훅 안에 addQuantity, subtractQuantity라는 함수를 추가해주고, 리턴을 해줬음
이렇게 컴포넌트에서 useCalculate을 호출해준 후, 함수를 가져와 쓸 수가 있다 (자주 쓰이는 함수를 hook으로 만들어주고 재사용할 수 있어 간편하고 보일러 플레이트를 줄일 수 있삼)
이렇게 모달을 구현해서, 장바구니의 수량을 조절할 수 있는 기능 완성~!
react-modal 같은 라이브러리를 선택하는 대신, 리액트 포탈을 이용해서 모달을 만들어 내는 경험할 수 있었다
다음엔 뭐할까?
