Storybook

• 회사에서 사용하는 UI라이브러리를 내부 개발자들을 위해 문서화하는 UI 개발도구
• 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 만들어볼 수 있다.
• 그리고 컴포넌트의 재사용성을 확대하기 위해 사용하는 UI 개발도구이다
• UI라이브러리로 활용하기 때문에 애플리케이션과 독립적인 개발 환경에서 실행된다. 애플리케이션을 탐색하지 않아도 Storybook을 통해 전체 UI에 대한 파악을 하기 용이하다. 그래서 외부에 공개하기 위한 기본 플랫폼으로 활용할 수 있다.

CSS-in-JS

• 다른 컴포넌트에 영향을 주지 않기 때문에 생성, 수정, 삭제가 자유롭다.
  • 코드를 구성하는 원칙은 "의존성이 낮고, 응집성이 높게 만드는 것"인데 CSS-in-JS를 활용해서 의존성을 낮출 수 있다.

• CSS가 특정 컴포넌트에 종속되기 때문에 className이 겹치는 등의 부작용이 없어서 협업 뿐만 아니라 유지보수에도 좋다.

• 기존의 방식은 전체 페이지에 필요한 CSS를 처음부터 모두 로딩해서 style 태그를 생성한 반면, CSS-in-JS는 그때 그때 필요한 만큼만 style 태그를 생성한다.
• CSS-in-JS 라이브러리 종류에는 styled-components, glamorous, aphrodite 등이 있으면, 그 중 가장 인기 있는 것은 styled-components이다.

Styled-Components

• 스타일 속성 정의 시 CSS3의 문법을 그대로 사용 가능

• 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 사용가능

• 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 후, 변경하고 싶은 속성만 새로 정의해주면 기존 속성을 확장하여 사용가능

• 별도의 className을 지정해주지 않아도, styled-components 가 각 태그마다 유니크한 className을 생성해준다.

Styled-Components로 컴포넌트를 만들 때 문법

틀린 문법

const Username = styled.(div)`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
`;

• 컴포넌트 정의 시 상황 (새로운 컴포넌트 생성, 기존 컴포넌트 상속)에 따라 . 또는 () 중 하나만 사용해야한다.

맞는 문법

• • 만드려는 컴포넌트의 이름과 사용하려는 태그를 styled.tag 로 정의한 후 백틱안에 스타일 속성을 정의해준다.

const Title = styled.h1`
font-size: 1.5em;
text-align: center;
`;

• • 기존 컴포넌트 스타일 속성을 상속받아 새로운 컴포넌트를 만들 때에는, 기존 컴포넌트를 styled()로 감싼 후에 변경하고싶은 속성만 새로 정의해주면 된다.

const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;
`;

• • props를 통해 스타일 속성을 전달받는 것이 가능하다.
  • 함수를 사용하여 props를 통해 전달받은 속성을 사용하거나 , default property를 사용할 수도 있다.

const Input = styled.input`
	color: `${(props) => props.inputColor || "red"}`;
`;

function App() {
	return (
    	<div>
        	<Input inputColor="blue" />
    	</div>
    );
  }

useRef

• useRef는 DOM엘리먼트의 특정 메소드를 활용해야 할 때가 자주 사용된다.
  • React에서 DOM엘리먼트에 직접 접근하여 메소드를 이용할 방법이 제한적이기 때문

• useRef의 초기값 (첫번째 인자)에는 어떤 참조자료형도 할당 가능
  • DOM 엘리먼트나 React 엘리먼트의 주소값을 할당하여 사용하는 경우가 더 많다

• 대부분의 경우 애플리케이션에서 변화하는 값은 useState으로 state을 지정하여 이용해야한다.
  • useRef의 리턴값을 변화해도, 컴포넌트가 재렌더링 되지 않기 때문

• ref 속성을 활용해서 DOM엘리먼트, React 엘리먼트의 주소값을 useRef의 리턴값에 전달가능.

UI 패턴

• AutoComplete
  • 자동완성

• Tag
  • 태그

• Toggle
  • 토글

• Tab
  • 탭

    추가적으로 Modal, Click to Edit, Radio Button, Slider, Carousel, Collapse, Drawer 등의 UI 패턴 종류들이 다양하게 있다. 구글링하면 나온다.