반응형 개발이야기/React10 React-Admin 리스트에 검색 및 필터 추가하기 Post List에 검색 및 필터를 추가해보겠다 먼저 PostFilter 컴포넌트를 추가한다 그리고 PostList 컴포넌트의 List에 filters 속성을 추가해준다 // in src/posts.tsx const PostFilter = (props) => { return ( ) } export const PostList = (props) => { return ( // ... ) } PostFilter 컴포넌트에서 의 source="q"는 JSONPlaceholder가 제공하는 전체 텍스트 활용을 말한다 alwaysOn는 항상 화면에 나타나도록 설정하는 속성이다 그리고 PostList 컴포넌트의 List에 filters를 추가하면 ADD FILTER 버튼이 생성된다 ADD FILTER 버튼을 클릭하면 .. 2020. 4. 23. React-Admin 리스트에 생성 및 수정 추가하기 지난 글에서 언급했듯 이번에는 리스트에 생성 및 추가 기능을 붙여 보려한다 그전에 지난 글이 궁금하다면 아래 링크 클릭~ React-Admin 시작하기 - API 앤드포인트를 맵핑하여 List로 보여주기 React-Admin 튜토리얼을 보고 따라해봤다 먼저 앞전에 쓴 포스팅 Create React App을 이용하여 React 앱, TypeScript 시작하기를 통해 React 앱을 만든 후 react-admin 패키지를 설치한다 yarn create react-app t.. hyung1.tistory.com 먼저 App.tsx 파일에서 import한 react-admin에 EditGuesser를 추가한 후 에 edit={EditGuesser} 를 추가한다 그러면 아래 화면처럼 리스트 열마다 EDIT 버튼.. 2020. 4. 22. React-Admin 시작하기 - API 앤드포인트를 맵핑하여 List로 보여주기 React-Admin 튜토리얼을 보고 따라해봤다 먼저 앞전에 쓴 포스팅 Create React App을 이용하여 React 앱, TypeScript 시작하기를 통해 React 앱을 만든 후 react-admin 패키지를 설치한다 yarn create react-app test-admin cd test-admin/ yarn add react-admin ra-data-json-server prop-types yarn start http://localhost:3000/ 에는 아래 화면처럼 나올 것이다 React-admin를 사용하기 위해서는 생성, 검색, 업데이트 및 삭제 (CRUD) 할 수 있어야 한다 그래서 JSONPlaceholder에서 예시용으로 제공해주는 샘플 더미 API를 이용해 연습해 볼 것이다 .. 2020. 4. 21. Create React App을 이용하여 React 앱, TypeScript 시작하기(with github) React와 Typescript 조합을 사용하여 개발을 하게 되어 공부하자는 의미로 이 글을 끄적여본다 Create React App를 이용하는 방법에는 여러가지가 있다고 한다 하지만 일단 나는 Create React App 홈페이지에 있는 빠른 시작을 따라해보았다 npx create-react-app my-app cd my-app npm start 여기서 npx는 실수가 아닌 npm 5.2+ 버전의 패키지 실행 도구라고 한다 npm start를 하면 http://localhost:3000/ 가 열린다 하지만 여기서 나는 Typescript와 리액트를 함께 이용해볼까한다 이미 생성된 Create React App에 Typescript를 적용하는 방법이 있지만 나는 작업한 것이 1도 없기에 그냥 새로 만드.. 2020. 4. 7. 이전 1 2 다음 반응형
