CDD(Component-Driven Development)란
페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했고 기획자가 요청한 사항에서 버튼에 대한 기획이 이전에 요청받았던 버튼을 똑같이 사용하도록 요청했을때 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Component Driven Development (CDD)
Styled Components
npm install styled-components
입력import styled from "styled-components"
컴포넌트 만들기
컴포넌트를 재활용해서 새로운 컴포넌트 만들기
Props 활용하기
useRef 란?
React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야한다.
하지만, 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생하기도한다.
이럴 때 사용할 수 있는 것이 바로useRef
라는Hook 함수
- focus
- text selection
- media playback
- 애니메이션 적용
- d3.js, greensock 등 DOM 기반 라이브러리 활용
위처럼 DOM 엘리먼트의 주소값을 활용해야 하는 경우
이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.
const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
<div>
<input ref={주소값을_담는_그릇} type="text" />
{/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
{/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
{/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
</div>);