styled-components로 조건에 맞게 스타일링을 하면 개인적으로 가독성이 많이 떨어진다고 생각한다. 항상 불편함을 느꼈지만 모른채하고 그냥 쓰고 있었는데 어쩌다보니 알게된 {css} 라이브러리를 써보고 마음이 편안해져버렸다.. 💡 일단 코드부터 바로import styled, { css } from 'styled-components';const COLORS = { warn: css` background-color: red; color: white; `, default: css` background-color: black; color: white; `,};const StBtn = styled.button` ${(props) => props.colorStyle} b..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 💡 prop drilling컴포넌트의 위계가 깊어짐에 따라 props가 불필요하게 많아지는걸 의미한다. 대충 하위 컴포넌트가 생겨남에 따라 어쩔 수없이 props를 전달'만'하는 컴포넌트가 많아지는 경우를 생각하면 편하다. 이번에 진행한 과제에서 context나 redux를 사용하지 않고 구현을 했더니 간단한 프로젝트임에도 꽤나 거슬릴정도로 props를 계속 전달해주어야 했다. 나는 위의 사진으로 보이는 UI를 다음 컴포넌트들과 같이 구성했다.`Dashboard` : 상단에 나만의 포켓몬과 추가한 포켓몬 카드들이 있는 컴포넌트`PokemonList` : 하단에 전체 포켓몬 목록이..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.페이지 레이아웃은 대충 저렇게 생겼다. 하단 포켓몬 카드의 `추가` 버튼을 누르면 상단 대시보드(나만의 포켓몬)영역에 추가된 포켓몬 카드가 나타난다. 대시보드 카드의 개수를 최대 6개로 정했다. 그럼 추가되지 않은 영역에는 포켓볼 사진을 보여주고 추가된 영역에는 포켓몬 카드를 보여주고 싶다. 여러가지 방법이 있겠으나 `fill()` 메서드를 이용해서 구현했다. 💡 동적으로 UI 출력하기6개의 고정된 자리가 있다. 추가된 포켓몬은 카드형식으로 보여주고 남는 자리에는 포켓볼 사진을 채워야한다. 📍 사용된 컴포넌트와 상태값 (fill 사용 관련)`selectedPokemon`추가된 ..