어제에 이어서, 오늘 했던 일은 먼저 버튼 css 으로 0 이 될경우에는 연한 회색으로 보이도록 하고, 숫자가 올라가면 색을 검정으로 변하게 하는 부분과 마이너스일때는 - 버튼이 눌리지 않도록 구현했다.
또 버튼이 클릭되었을경우 돋보기 모양이 넓어지면서 검색이라는 단어가 보이는 부분까지 완성시켰다.
음수가 안되도록 하기
먼저 마이너스가 되지 않도록 한건, 원래 utils 함수를 따로 만들어서 처리할까 하다가, 간단한 연산이라, 리듀서에서 3항연산자를 사용해서 해결했다.
현재 상태가 1일경우 누르면 0이 되도록 처리.
-> 수정. 이렇게 했었는데 이제와서 다시보니, 마이너스 누르면, 갑자기 0으로 변한다. ( 5였는데 마이너스 누르면 0으로 초기화됨)
아마 전반적인 코드를 수정하면서 꼬인것같다. 리덕스는 순수함수여야 하는 이유를 다시금 깨닫고, utils 을 따로 만들어서 여기서 값을 받아서 음수인지 양수인지 체크를 한뒤, 그 값을 받아와서 view로 보이도록 했다.
0일때는 버튼이 회색으로
styled-component을 사용한뒤 컴포넌트에 값을 따로준뒤 이걸 props로 받아오는 방식으로 해결
버튼에 따라 스타일 변경 (검색)
버튼이 눌려지면 돋보기 모양에서 옆에 검색이라는 문구가 나오도록 하는 부분인데, 리덕스에서 가져온 hidden 값이 불리언 값. 이걸 재사용해서 styled-component로 보낸뒤 그 값에따라 크기가 달라지도록 구현했다.
스타일 컴포넌트는 알면알수록 정말 유익한 것 같다.
만약 비슷한 스타일이지만 명칭이 다를경우 css로 따로 만든뒤에
이값을 받아서 넣어주면 간편하게 사용가능하다
여기서는 이렇게 안해도되었지만, 연습할겸 이렇게 만들어봤다.
내일은, 스크롤 이벤트로 스크롤이 내려가면, 상단바가 작아지는 것을 중점적으로 해볼 예정이다.
