Custom Component

최정석·2022년 7월 5일
0
post-thumbnail

CDD(Component-Driven Development)란

  • 부품 단위로 UI 컴포넌트를 만들어 나가는 개발

페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했고 기획자가 요청한 사항에서 버튼에 대한 기획이 이전에 요청받았던 버튼을 똑같이 사용하도록 요청했을때 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Component Driven Development (CDD)

Styled Components

  • CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다.
  • 설치 방법
    터미널에 명령어 npm install styled-components 입력
    그 다음 Styled Components를 사용할 파일로 import
    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>);
profile
코딩, 널 가지러 왔다!

0개의 댓글