React에 Atlas ui-kit 설치하기

---

리액트를 멋있게 쓰자

Atlaskit은 리액트에서 사용가능한 사용자 인터페이스 킷이다.

보기좋은 떡이 먹기도 좋다고,

미리 디자인된 컴포넌트들을 쉽게 사용할 수 있게 도와준다.

AtlasKit으로 디자인한 페이지 샘플

설치 방법도 간단하다.

먼저 atlaskit이 의존하고 있는 라이브러리부터 설치하자.

npm i styled-components

Attention!

만약 위의 패키지가 설치되어 있지 않다면,

JSX 빌드 단계에서 아래의 오류 메시지가 뜬다.

ERROR in ./node_modules/styled-components/dist/styled-components.browser.esm.js
Module not found: Error: Can't resolve '@emotion/is-prop-valid' in 'C:\Users\aerocode\MyProject\Typescript-React-Study\node_modules\styled-components\dist'

이후에 사용할 컴포넌트 목록에서 원하는 패키지를 찾는다.

여기서는 버튼 패키지를 설치할 것이다.

npm install @atlaskit/button

버튼까지 설치했다면 다음의 예시처럼 import하여 사용하면 된다.

디자인 설정 옵션은 각 패키지 도큐먼트에 자세하게 적혀있다.

import Button from "@atlaskit/button";
import React from "react";

// Exercise 001
// 클릭하면 "Hello, World!"를 출력하는 버튼 예제
export default class HelloButton extends React.Component {
    constructor() {
        super({});

        // this 키워드의 의미가 다르기 때문에,
        // 반드시 이벤트 핸들러는 바인딩을 해야한다.
        this.onClick = this.onClick.bind(this);
    }

    onClick() {
        alert("Hello, World!");
    }

    render() {
        return (
            <Button appearance="primary" onClick={this.onClick}>
                Click for hello
            </Button>
        );
    }
}