컴포넌트 디자인
-
React, 컴포넌트 디자인, styled-component 적용Topic/React | Redux 2022. 1. 4. 22:17
리액트 컴포넌트 디자인 실습 ✔️ 리액트 모달 창 띄우기 ☑️ 삼항 연산자를 이용한 조건부 렌더링을 활용한다. alert창과 다르게 어두운 배경 태그 내부에 창 태그를 삽입해 구현한다. import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 100%; position: relative; `; export const ModalBackdrop = styled.div`ㅁ ..
-
REACT 컴포넌트 디자인, CDD, Storybook, useRef, Styled-ComponentTopic/React | Redux 2022. 1. 3. 22:04
CDD(Component Driven Development) ✔️ 개발 방법 중의 하나로, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법이다. CDD가 트렌드가 되면서, 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다. Storybook ✔️ UI 개발 // Component Driven Development를 하기 위한 도구다. 각각의 컴포넌트들을 따로 볼 수 있어, 전체 UI를 한눈에 보고 개발할 수 있다. 재사용성을 확대하기 위해 컴포넌트를 문서화한다. 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 사전에 버그를 방지하며 테스트 및 개발 속도를 향상한다. 기본적으로 독립적인 개발환경에서 실행되기 때문에 ..