[ReactJS] Ant Design에 대한 이야기

Ant Design에 대하여

만든 곳https://ant.design/

간략한 소개A UI Design Language

  • 리액트와 타입스크립트(Typescript) 기반으로 제작된 UI라이브러리.
  • 중국회사에서 오픈소스화한 라이브러리
  • MIT License


설치

React에서 Ant Design 사용하기

주요 기능

  1. Layout Component

      Grid

      • 각종 컴포넌트와 HTML 요소들을 쉽게 배치할 수 있도록 Grid 영역을 제공합니다.

      • 이전에 사용했던 Bootstrap 의 경우 12개의 요소로 구분하여 세분화된 화면 구성을 하기 힘들었으나, Ant Design의 경우 24까지 요소로 구분되어 좋은 것 같습니다.


  2. Data 입/출력을 위한 다양한 Component를 제공

    • Ant Design에서 제공하는 이미 만들어진 Components입니다. React의 특성을 활용하여 이미 Component로 만들어져 있습니다.

      • 주요기능으로서 input Component에서의 "자동완성 기능 <AutoComplete />", "날짜 선택 <DatePicker />", 숫자만 입력할 수 있는 "input 컴포넌트<InputNumber />", 파일을 업로드할 수 있도록 구성된 "파일 컴포넌트 <Upload />" 가 있습니다.

      • 다양한 컴포넌트 목록 확인은 여기에서 확인할 수 있습니다. ( https://ant.design/components/auto-complete/ )

    • insert
  3. 컴포넌트의 사용방법

    • React를 위한 Ant Design (Design Components)은 Bootstrap과 같은 일반적인 CSS 프레임워크와 다르게 각 컴포넌트별 사용법이 존재합니다.

    • 예를 들어 Table 컴포넌트를 사용하고자 할 경우 테이블에 표시될 데이터는 컴포넌트에서 제공하는 규칙에 맞게 지정해야 합니다.

    • Ant Design Table Component sample Collapse source
       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      const dataSource = [{
        key: '1',
        name: 'Mike',
        age: 32,
        address: '10 Downing Street'
      }, {
        key: '2',
        name: 'John',
        age: 42,
        address: '10 Downing Street'
      }];
       
      const columns = [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      }];
       
      <Table dataSource={dataSource} columns={columns} />
    • 위의 예제에서 보는 것처럼 Table 컴포넌트에는 dataSource, columns 프로퍼티를 설정해야 합니다. 이외 다양한 프로퍼티를 제공하고 있으며 각 컴포넌트별 제공되는 프로퍼티는 https://ant.design/components/table/ 에서 확인할 수 있습니다.

  4. 국제화 지원

    • Ant Design 은 국제화지원을 기본하고 있으나, 아직 한국어는 공식 제공하고 있지 않습니다.
    • 다만, localeProvider를 제공하고 있어 해당 기능을 설정 후 몇몇 국가의 언어를 사용할 수 있습니다. ( https://github.com/ant-design/ant-design/blob/master/components/locale-provider/ )
      • 보다 많은 언어의 지원을 위해 react-intl 라이브러리를 추가하거나 사용할 수 있습니다.


[ReactJS] Ant Design Custom Theme 사용하기

개요


컴포넌트 단위의 디자인 Variables 확인

    ant-design-component 프로젝트를 실행하여 아래와 같은 화면을 확인할 수 있습니다.
    • (1): Component의 목록을 표시하는 메뉴입니다. 이 메뉴를 클릭하면 오른쪽의 상세 정보 화면이 변경됩니다.
    • (2): 선택한 Component가 화면에 표시되는 미리보기 화면입니다.
    • (3): 선택한 Component에서 사용되는 기준 값입니다. LESS 언어 기준으로 설정되어 있습니다.

컴포넌트 디자인 변경하기

  • 가칭 theme.less 파일에서 변경하고자 하는 Variable 을 설정합니다.
    • 예:
      • 위와 같이 변경할 경우 해당 값을 사용하는 모든 컴포넌트들의 디자인이 변경됩니다.
  • theme.less의 값을 설정 혹은 변경 후 서버를 다시 시작해야 적용됩니다.


요약

  1. ant-design-components 프로젝트를 실행
  2. 변경하고자 하는 컴포넌트를 메뉴에서 확인
  3. "사용 예" 화면에 표시되는 값을 확인
  4. theme.less 파일에서 변경
  5. 서버를 다시 시작하여 변경된 부분을 확인.


[ReactJS] React JSX, VirtualDOM, Component, Prop, State

Lifecycle

JSX (JavaScript XML)

  1. React JSX는 XML-like Syntax를 native Javascript로 변환. ""로 감싸지 않으며 순수하게 작성. 시작과 끝에 ()를 사용하여 가독성 유지하는 것을 권장.

    Sample
    class Contents extends Component {
        render() {
            return (
                <div>
                    <h3>Welcome React!</h3>
                    <div>
                        <UserInfoForm />
                    </div>
                </div>
            )
        }
    };
  2. Nested Elements: 단일 컴포넌트에서 여러개의 Element를 render할 경우 그 element들은 하나의 wrapper(container) element안에 포함시켜야 한다.
    • Question: wrapper element가 될 수 있는 대상 element는 어떤 것들이 있을까?
  3. Javascript 표현식 사용
    1. JSX안에서 {}를 사용하여 간단하게 표현식 표기
    2. {sample} 과 같이 표현가능

      Sample
      var 또는 let 변수 > sample = var sample = "a";
  4. 임의의 method를 생성하여 사용할 수 있음

    helloMessage() {
        alert("hi there");
    }
    render() {
        return ( ... )
    }
  5. 일부 속성들은 javascript의 예약어를 피하기 위해 예를 들어 'class=...'는 'className=...'과 같이 사용해야 한다.  (http://facebook.github.io/react/docs/tags-and-attributes.html)

Virtual DOM

  1. React에서는 가상 DOM이 생성되어서 조작이 됨.
  2. 이 가상 DOM은 고유의 Lifecycle이 존재함.

Component

  • 컴포넌트에는 여러개의 컴포넌트를 변환할 수 없으며 wrapper 형으로 이뤄진 단 하나의 element만 변환할 수 있다.
    1. Prop
      • 변하지 않는 값. 내부에서 변경되어서는 안되는 값. 외부에서 전달하는 값.
        • 다음과 같이 참조하여 사용할 수 있음 -> this.props.xxx
      • 객체, 함수 등 어떠한 타입으로도 지정할 수 있음.
      • 예: A라는 컴포넌트에서 B라는 컴포넌트로 데이터(혹은 값)를 전달하기 위해 사용
    2. State
      • 변하는 값: 자신의 상태값을 변경시키는 값
        • 이 값은 외부에서 변경되지 않고 내부에서 직접 변경하는 값.
          • 외부 컴포넌트에서 prop로 전달된 값을 자기(컴포넌트)의 state에 설정하거나 변경 (setState( ... )를 이용.)
      • state를 변경할 때 사용하는 위치는 컴포넌트의 생명주기에 따라 조심해서 다뤄야 한다.
      • 사용할 수 없는 곳에서 사용할 경우 무한루프에 빠질 가능성이 있다.
        • 예; 사용해서는 안되는 곳의 주요 이벤트핸들러(메서드)
          • componentWillReceiveProps ( .... )
        • 이에 관련된 자세한 내용은 앞으로 다룰 Lifecycle과 함께 업데이트 예정( ... )
  • Update 2017.07.26: 컴포넌트를 아래와 같이 분류할 수 있다.
    • Component : Dumb Component : Props 만을 받으며 오직 화면의 View 영역만으로 구성된 Component > 스스로 능동적인 행위를 하지 못하고 호출자(Smart Component)에 의해 제어
    • ContainerSmart Component: 자신만의 State와 기능을 가진 여러개의 Dumb Component의 View로 구성된 Component > 스스로 기능을 구성하고, 그 기능을 각 컴포넌트를 이용해 제어



참고 ES6 *

  1. Arrow Function type
    • let a = (a, b) => { ... } // this => function { } <- ..여기가 this.. 
    • Lamda function
  2. for-in, for-of
    • for-in: 오프젝트에서 열거가능한 프로퍼티가 대상
    • for-of: 오브젝트가 대상, prototype에 연결된 프로퍼티는 대상이 아님


[ReactJS] create-react-app 설치와 샘플 실행

create-react-app에 대하여

  • 이 오픈소스는 facebook incubator라는 Github에 위치
  • create-react-app을 사용하는 주요한 이유는 React를 사용함에 있어 발생하는 많은 설정의 어려움을 해소하기 위해 개발되었습니다. ( 참고: https://techstory.shma.so/create-react-app%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC-1-935a21297550)
  • 기본적으로 ES2015문법을 지원하며 watchify가 기본설정으로 지정되어 있어 쉽게 작업할 수 있습니다.
    • create-react-app 덕분에 npm과 yarn을 설치하고 create-react-app을 설치한 후 샘플 프로젝트를 실행하는 시간은 불과 몇 분안에 끝이 납니다.
    • npm (혹은 yarn) 설치 > create-react-app 설치 > create-react-app [hello-world](샘플프로젝트가칭) 프로젝트 생성 > 실행 끝

npm을 이용하여 create-react-app설치하기 (Windows 환경 기준)

  • npm 설치방법은 여기를 참고하세요.

  1. Windows - command 프로그램을 실행합니다.
  2. command 창에 아래의 명령어를 실행하여 create-react-app을 설치합니다.
    • $ npm -g install create-react-app

        • npm에서 종속된 관련 라이브러리를 다운받아 설치를 진행합니다.
        • 설치가 완료되면 아래와 같이 완료 화면을 확인할 수 있습니다.

      • 설치가 완료되면 어디에 설치가 되었는지 친절하게 표시합니다.

설치 확인 방법

    • windows command 창에서 아래의 명령어를 실행하세요.
    • create-react-app --version



create-react-app 을 사용하여 샘플프로젝트를 생성하고 페이지 실행(확인) - (Windows 환경 기준)

  • create-react-app을 사용하면 손쉽게 프로젝트를 생성할 수 있습니다.
  • Windows의 command 에서 아래와 같이 명령어를 실행 해보세요.
    • $project_home$ > create-react-app hello-world
      • 위의 화면과 같이 설치가 실행됩니다.
      • 프로젝트의 설치는 해당 폴더에 프로젝트의 지정된 이름 (위 예제에서는 hello-world)으로 실행됩니다.
    • 필요한 라이브러리를 다운받는 과정이 지나가고 설치가 끝나면 happy hacking! 이라는 메시지와 함께 종료됩니다.
    • 설치로그 (참고)

        • 위의 설치로그를 확인하여 무엇을 작업하였는지 확인할 수 있습니다.
        • 샘플 프로젝트를 생성할 때 860개의 새로운  dependencies가 함께 저장된 것을 볼 수 있습니다.
  • 샘플 프로젝트 실행
    1. 프로젝트가 설치된 폴더로 이동

      cd $project_folder$/hello-world
    2. yarn start 를 이용하여 프로젝트 실행
    3. 실행 확인 locahost:3000

create-react-app 을 이용하여 생성된 프로젝트의 구성요소 확인

  • 샘플 프로젝트를 설치한 이후 소스의 위치를 찾아보면 아래와 같이 구성되어 있음을 확인할 수 있습니다.
  • 프로젝트를 빌드하기 위한 필수구성요소 파일 (즉, 없으면 안되는 중요한 파일) ※삭제금지
    • public/index.html
      • 페이지 템플릿
    • src/index.js
      • javascript 진입점. (임의 수정할 경우 올바르게 표시되지 않을 수 있습니다.)
  • hello-world / 프로젝트의 ROOT
    • package.json (임의 수정 및 편집 금지)
      • 프로젝트에 사용되는 dependencies 를 정의한 파일
  • src 디렉터리 (하위 포함)
    • Webpack이 인지하는 폴더이며 이외의 다른 폴더에 위치한 js 혹은 css 파일은  Webpack이 관여하지 않습니다.


NodeJs / Yarn 설치하기

설치하기 전 읽어보기

  • npm에 대하여 (참고문서: https://docs.npmjs.com/getting-started/what-is-npm)
    • npm은 javascript 개발자들에 의해 공유와 재사용을 쉽게할 수 있도록 만든 패키지 매니저 프로그램입니다.
    • npm의 주요기능 (참고: https://velopert.com/241)
      • NPMSearch에서 탐색 가능한 node.js 패키지/모듈 저장소
      • Node.js 패키지 설치 및 버전/호환성 관리를 할 수 있는 커맨트라인기반 유틸리티

  • Yarn에 대하여 (참고문서: http://www.eloquentwebapp.com/yarn-new-package-manager-javascript/)
    • npm 이라고 하는 기존에 널리 사용되고 있는 javascript 패키지 매니져의 단점과 기타 안정성과 속도를 개선한 패키지 매니져입니다.
    • 페이스북, Exponent, Google 과 Tlide의 엔지니어 그룹이 함께 협력하여 만들었으며 npm보다 빠르고 안정적이고 안전하다고 합니다.

Node JS 설치 (Windows 환경 기준)

  • 설치 파일 다운로드: https://nodejs.org/en/download/
    • 설치 버전은 안정화버전(v6.10.3 LTS)을 다운받는 것으로 추천합니다.
    • 설치 파일 다운로드 후 마법사에 따라 설치를 진행하면 됩니다.
    • 설치 옵션에 전역 환경설정을 하도록 체크하세요.
  • 설치 확인 방법
    • Command 프로그램을 실행하여 npm 명령어 실행
      • Usage: npm <command> … 등의 메시지가 나오면 설치 완료

Yarn 설치 (Windows 환경 기준)

  • 설치파일 다운로드: https://yarnpkg.com/en/docs/install
    • 설치파일을 다운로드하여 설치마법사를 이용하여 쉽게 설치 가능합니다.
  • 설치 확인 방법
    • Command 프로그램 실행 후 "yarn" 명령어를 실행하여 아래의 메시지가 나오면 설치 완료
      • 처음 설치하였다면 각종 패키지 파일을 자동으로 다운받습니다.


|  1  |  2  |  3  |  4  |  ···  |  6  |