Component2 컴포넌트를 Props로 넘길 때, Props 제어 따로하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11 Icon + Title 로 이루어진, 비슷한 형태의 UI 코드를 작성할 때 종종 배열로 작성합니다.이전까지 저와 팀원 분들의 코드에서 아래와 같은 코드를 종종 볼 수 있었습니다.const iconList = [ { label: '검색', icon: , }, { label: '선물하기', icon: , }, { label: '내정보', icon: , },]; 실제로 사용할 때에는 문제가 없는 코드이지만, 같은 Style Props가 중복되었습니다.또한 상수로 배열을 분리했을때, 상태를 전달받기 어렵다는 단점도 있었습니다. 때문에 아래와 같은 방식으로 리팩토링이 가능했습니다.const .. 2024. 10. 1. React + Type Script 로 팝업창 만들기( + Type {children: Element} has no properties )에러 해결방법 최근 프로젝트를 설계하면서 공용 컴포넌트를 어떻게 짜야되는지에 대한 고민이 깊다. 그래도 하나씩 설계하는 가운데, 팝업창 컴포넌트를 만드는 과정과 생긴 오류에 대해 적어보고자 한다. 0. 목표 설정 일단 이런 형태의 팝업창을 만들 예정이다. 안에 들어가는 컨텐츠에 대한 고민은 나중에 하기로 하고, 화면 가운데에 뜨는 하얀 창 + 외부 어두운 창 의 컴포넌트를 만들고 싶었다. 실패기 1. Styled-components로 만들기 사실 이건 볼것도 없이 실패했다. 팝업 창을 만들려면 내부 흰 부분 + 밖 검은 부분 두개의 div 가 필요한데, 재사용성을 위해 두개의 Outer, Inner 를 따로 사용하려면 여간 번거로운게 아니었다. 2. React Components 형태로 제작하여 Element 전달하기.. 2022. 5. 18. 이전 1 다음
