React 앱에서 인기있는 antd 라이브러리에서 checkbox와 radio 컴포넌트 사용 방법에 대하여 알아봅니다.# react antd 컴포넌트 checkbox, radioreact에서는 매우 자주 사용되는 antd 라이브러리에서 checkbox와 radio 컴포넌트는 입력폼을 작성할 때 자주 사용됩니다. 먼저 간단한 사용 방법은 아래와 같습니다. 아래 예제는 Radio와 Checkbox를 각각 적용하였습니다.! 체크 상태 on / off 적용하기먼저 체크 상태를 표시하기 위해서 checked 프로퍼티를 아래와 같이 설정합니다.<Checkbox checked={false} />그리고 onChange를 사용하여 값이 변경된 경우 해당하는 함수를 호출하여 새로운 값으로 업데이트를 합니다.import { R
Last Modified : 2020-12-30 09:12:38
React UI 라이브러리 antd의 컴포넌트 중 하나인 Input에 대하여 알아봅니다.<Input />antd의 Input 컴포넌트는 html의 input 엘리먼트처럼 사용자의 입력을 받아 동작하는 인터렉션 구현시 사용할 수 있습니다. 아래는 Input 컴포넌트의 자세한 사용 방법과 property 및 예제를 함께 알아봅니다.# antd의 Input 컴포넌트 정보 알아보기Antd 컴포넌트 중 하나인 Input 컴포넌트는 방문자의 입력폼 요소 중 하나로 문자열을 등의 입력값을 전달 받아 서버에 전송하는 등 여러 작업을 수행할 수 있습니다.아래는 Input 컴포넌트에 적용가능한 다양한 property(props) 정보입니다.value // [Stiring] 입력값defaultValue // [string] 기
Last Modified : 2020-11-27 10:55:51React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.<Table />그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.# antd Table 컴포넌트 정보 및 예제antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.dataSource // 테이블에 출력할 리스트 정보columns // 테이블의 컬럼 정보를 표시합니다.rowKey // [String | Function] unique Key 값을 설정합니다.예를들어 아래는 간단한 예제 코드입니다. 먼저 dataSource에 필요한 정보로 siteList 배열값을 생성합니다.const siteList = [ {
Last Modified : 2020-09-10 10:52:52React UI 라이브러리 antd에서 날짜 및 시간을 입력할 수 있는 컴포넌트 <DatePicker />에 대하여 알아봅니다.<DatePicker /><DatePicker />는 방문자로부터 날짜와 시간을 입력 받을 수 있는 antd의 컴포넌트입니다. 날짜를 입력 받을 경우 텍스트로 입력 받을 수도 있지만 사용자 입장에서는 매우 불편하므로 이와 관련된 Datepicker 라이브러리가 매우 많이 사용합니다. 그런 이유로 다양한 라이브러리가 존재하는데 이 중에서도 antd의 DatePicker는 기능과 편의성을 모두 가지고 있어 특별히 다른 라이브러리를 찾을 필요가 없는 것 같습니다.그럼 아래에서 antd의 DatePicker에 대하여 자세히 알아보도록 하겠습니다.! DatePicker 컴포넌트의 Proper
Last Modified : 2020-09-01 19:52:29최근 react에 사용하는 antd UI 라이브러리 업데이트를 계속해서 포스트중입니다. 오늘 내용은 antd의 Button 컴포넌트에 대하여 알아봅니다.# antd Button 컴포넌트react 앱에서 버튼의 기능과 화면 구현을 목적으로 antd의 Button 컴포넌트가 사용됩니다. Button 컴포넌트를 사용하여 방문자의 클릭 등의 요청에 필요한 기능을 구현하거나 필요한 정보를 서버에 요청할 수 있습니다.<Button />antd의 Button 컴포넌트는 기본적으로 아래의 5가지의 타입을 가지고 있습니다.- Primary // 주요 기능에 사용 됨. 업데이트 등등- Default // Primary가 주요 기능인 경우 그 외의 목적 등에 사용 가능- Dashed // Dashed 테두리 스타일-
Last Modified : 2020-08-21 09:13:21
React 앱에서 antd의 Input 컴포넌트를 사용하고 있을 경우 만약 특정 시점에 Input 컴포넌트에 focus 되어 커서가 위치하게 하려고 합니다. 예를들어 검색 버튼을 클릭하는 경우 검색 Input 컴포넌트에 커서가 focus되어 타이핑이 바로 가능하도록 구현하려고 합니다. 어떻게 하면 될까요?먼저 실패한 케이스를 알아봅니다. 순수 자바스크립트로 DOM에 접근하여 input 태그에 focus() 메소드를 동작해보았습니다. 에러는 발생하지 않지만 정상적으로 focus 되지 않아 다른 방법이 필요했습니다.# antd Input에서 focus 사용하기결과적으로 react에서 refs를 사용하여 엘리먼트에 접근하는 방법을 사용하였습니다. 즉, Input에 ref prop 정보를 추가한 후에 createR
Last Modified : 2020-12-13 08:57:12
react에서 사용하는 antd 컴포넌트 중 Table을 사용하는 경우 나타나는 페이지네이션을 숨기거나 삭제하는 방법에 대하여 알이봅니다.! antd의 Table 컴포넌트 페이지네이션 삭제antd의 Table 컴포넌트는 기본값으로 페이지네이션을 자동으로 화면에 출력합니다. 불러오는 리스트의 개수가 많은 경우 첫 페이지가 아닌 다른 페이지에 나타나게 되죠.@ Table의 페이지네이션이 필요하지 않은 경우물론 편리한 기능이지만 만약 페이지네이션이 필요없는 경우가 언제 있을까요? 보이는 리스트 수와 상관없이 항상 페이지네이션 없이 화면에 모두 출력하길 원할 수도 있을 것입니다. 아니면 별도의 페이지네이션 컴포넌트를 사용하는 경우도 있을 수 있겠네요.- 페이지네이션 없이 항상 모든 리스트를 보여주려고 할 때- 별도
Last Modified : 2020-12-22 09:55:48
antd 라이브러리의 Table 컴포넌트를 사용하면 리스트 형태의 데이터를 테이블로 출력할 수 있습니다. 만약 테이블에 체크박스를 사용하려면 어떻게 하는지 방법을 알아봅니다.추가로 체크박스를 사용하여 전체 선택 및 전체 해제 방법도 함께 알아봅니다.# antd Table 컴포넌트 체크박스 사용하기테이블에 체크박스를 사용하여 선택하는 방법은 많이 사용됩니다. 원하는 row만 선택하거나 해제할 수도 있고 전체선택하거나 전체 해제하는 것 역시 가능하죠.! 만약 Table에 체크박스를 사용하려면?Table 컴포넌트는 기본 설정이 체크박스를 사용하지 않도록 되어 있으므로 만약 체크박스를 사용하려면 옵션 설정이 필요합니다. 이때 필요한 옵션값은 바로 rowSelection, rowKey니다.import { Table
Last Modified : 2020-12-19 14:41:48React antd 라이브러리의 Dropdown 컴포넌트는 자주 사용되는 UI 컴포넌트입니다. 이 경우 드랍다운시 나타낼 메뉴는 overlay를 사용하여 Dropdown될 경우 나타나게 될 엘리먼트로 추가하게 됩니다. 여기서 overlay에 만약 엘리먼트 요소뿐만 아니라 파라미터를 함께 넘기고 싶다면 어떻게 할 수 있을까요?# antd Dropdown 컴포넌트 overlay 요소에 파라미터 전달먼저 Dropdown 컴포넌트의 overlay에 파라미터를 전달할 수 있습니다. 이 경우 방법은 생각보다 간단한데 바로 overlay에 리액트 엘리먼트를 바로 전달하지 않고 함수로 변경하여 사용하는 방법입니다."리액트 엘리먼트를 함수로 변경하여 전달할 것"그럼 예제를 만들고 알아보겠습니다. 만약 아래와 같이 Dropd
Last Modified : 2020-10-23 19:47:33