Storybook을 활용하여 본격적으로 디자인 시스템 구축하기 스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다. 그런데, 어떤 컴포넌트를 만들어야 할까요? 사실 가장 이상적인것은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 재사용이 자주 될 것 같은 컴포
Storybook 프로젝트에서 TypeScript로 컴포넌트의 props 문서화 편하게 하기TypeScript 를 사용하면 JavaScript의 불편함을 해결해줄 수 있고, IDE를 더욱 적극적으로 활용 할 수 있게 해줍니다. 특히, 리액트 컴포넌트를 TypeScript 로 작성하면, PropTypes 를 완전히 대체 할 수 있고 훨씬 유용하고 편합니다.
Storybook을 다양한 Addon과 함께 활용해보면서 사용법 정복하기 storybook addon actions addon knobs addon docs 2. 스토리북, 시작하기.Storybook을 사용할 때 create-react-app으로 만든 프로젝트에서 Storybook 설정을 하여 사용할 수도 있고 아예 새로운 Storybook 전용 프로젝트
TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기이 튜토리얼은 TypeScript와 Storybook을 사용하여 리액트 디자인 시스템을 구축하는 방법을 다룹니다. 이 문서를 통하여 여러분들은 다음과 같은 주제들을 배우게 됩니다. 디자인 시스템 이해하기 Storybook의 주요 기능 살펴보기 및 컴포넌트 문서화하기 디자인 시스템
React.js Functional Component (함수형 컴포넌트)React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용한다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야 했었다. 1234567891011import React, {
React.js Router v3 사용하기아직 React-Router v3 는 유지보수가 이뤄지고 있는 상태이며, 현재 2017년 3월 기준 가장 최신 버전은 v4 이다. (한동안 베타였는데 정식 릴리즈되었다. 관련 동영상이 만들어졌으니 여기를 참조) 리액트 프로젝트에서 여러 페이지가 있을 땐, 라우터를 사용한다. 라우터는 사용자가 요청한 URL에 따라서
React.js Router: URL 에 따라서 다른 결과물을 보여주기이 포스트는 Outdated 되었으니, React-router v3 를 더 자세히 다루는 리액트 프로젝트에서의 라우터, React-router v3 사용하기 를 참고하도록 하자. 이번 포스트는 React.js 의 Router 사용에 대한 내용으로 Router 는 사용자가 요청한 URL 의
React.js ref: DOMref는 reference 를 의미하며, 이는 DOM 요소에 이름을 달아준다.HTML 의 id와 사뭇 비슷하지만, id는 일반 DOM 요소에 특정 DOM 메소드만 사용 할 수 있지만, ref는 DOM 요소에도 사용하고 컴포넌트에도 사용 할 수 있으며, 해당 컴포넌트가 가지고있는 메소드 및 변수들을 사용 할 수 있다는 점이 큰
React.js Component LifeCycle API이번에는 React.js 컴포넌트의 LifeCycle API 에 관하여 살펴보겠다.LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드들 이다.이 메소드를 왜 쓰는것인가? 과연 쓸일이 있을까? 라고 생각할 수 있는데, 가
React.js Immutability Helper – State 내부 Array 에 원소 삽입/제거/수정컴포넌트에서 사용할 데이터 배열을 매핑하여 효율적으로 렌더링하는 방법에 이어 이번엔 데이터 배열에 변화를 주는 방법을 알아보도록 하겠다. 이 과정은 생각보다 쉽지만은 않다. 1. state 안의 array 에 원소 삽입/제거&