[유데미x스나이퍼팩토리] 10주 완성 프로젝트 11일차 - Component: NavigationBar 개발

• 일시 : 23.07.27 목요일
• 주제 : 통증관리 시스템 - 분류 3.포인티 디자인 시스템 라이브러리 개발

오늘의 목표

---

• Component 페이지에서 NavigationBar를 컴포넌트화 한다.
• NavigationBar - Top과 NavigationBar - Bottom으로 나누어 개발한다.

진행 사항

---

✅: 완료, 🌀: 진행중, 🆕: 대기

🆕 (개인) Component: Banner 개발

• props를 얼만큼 받아야할지 관련하여 멘토님 답변 대기 중

🌀 (개인) Component: Thumbnails 개발

• 팀원 리뷰 대기 중

🌀 (개인) Component: NavigationBar 개발

코드 보기 (추후 수정 가능성 있음)

• 파일구조

  • Components
    • NavigationBar
      ├─ Bottom
      │ ├─ index.tsx
      │ └─ styles.ts
      ├─ Top
      │ ├─ index.tsx
      │ └─ styles.ts
      ├─ index.tsx
      └─ type.ts

• Top/index.tsx

• Video/index.tsx

• styles.ts

• type.ts

적용코드

// ex)
<NavigationBarTop page='center'/>
<NavigationBarBottom page='mypage'/>

적용화면

회고

---

길잡이

---

Styled components 활용하기

Foundation에서 만들어 놓은 컴포넌트를 가져다 쓸 일이 많다 보니 styled components에서 이 컴포넌트들의 정해진 스타일을 변경해주는 것이 필요했다.

component / tagname

// import styled from 'styled-components'

const Button = styled.button`
  background: #BF4F74;
  border-radius: 3px;
  border: none;
  color: white;
`

const TomatoButton = styled(Button)`
  background: tomato;
`

render(
  <>
    <Button>I'm purple.</Button>
    <br />
    <TomatoButton>I'm red.</TomatoButton>
  </>
)

위와 같이 괄호 안에 변수명을 써주면 해당 변수에 이어서 스타일을 적용할 수 있다.

"as" polymorphic prop

만약 div 태그를 가지고 있는 Component를 사용하는데 이 컴포넌트를 button 태그로 변경하고 싶다면 다형성prop인 as를 사용한다.

// import styled from "styled-components";

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

참고 레퍼런스

• Styled-Components에서 as와 attrs란?
• styled-components 공식문서

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.