React (13) 썸네일형 리스트형 [React] Keyboard 이벤트 (Enter Key 검색) 어떤것을 검색하고자 할 때 보통 Enter 키를 사용하거나 마우스로 버튼을 클릭한다. 특정 키를 눌렀을 때 발생하는 이벤트에 대해 처리하는 방법을 알아보자. 키보드 이벤트에 대한 설명은 리액트 사이트에 친절하게 되어있다. 합성 이벤트(SyntheticEvent) – React A JavaScript library for building user interfaces ko.reactjs.org React Keyboard 이벤트명과 발생 시점은 아래와 같다. onKeyDown : 키를 눌렀을 때 이벤트 발생 후 입력 onKeyPress : 키를 눌렀을 때 이벤트 발생 onKeyUp : 키를 눌렀다가 땠을 때 입력후 이벤트 발생 keydown > keypress > keyup 목록 조회를 위한 Enter 키 이.. React 체크박스를 통한 배열 렌더링 및 Cleanup(with material-ui, notistack) test 환경을 위해 create react app 을 통한 리액트 프로젝트를 생성 npx create-react-app react-array-cleanup 이 후, 테스트에서 사용될 ui 패키지(@material-ui/core)와 스낵바 패키지(notistack)를 설치 $ yarn add @material-ui/core notistack (스낵바 패키지는 material 에서 제공해주는 걸로 사용해도 되지만, 편의를 위해 따로 라이브러리를 사용하였다.) index.js에서 스낵바 프로바이더를 설정 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import .. [React] react-router-dom 시작하기 (feat. material-dashboard) 현재 CRA를 이용하여 프로젝트를 생성하였다. 간편한 디자인 적용을 위해 material-UI에서 제공해주고 있는 무료 템플릿을 가져다 썻다. 필요없는 소스파일을 없애기 위해 내가 만든 프로젝트에 material 템플릿을 차차 적용시켜보려고 한다. SPA(Single Page Application)을 개발할 때 가장 먼저 겪는 어려움은 웹페이지 라우팅이 아닌가 싶다. 역시나 첫번째 난관이 react-router 컴포넌트에서 발생했는데.. 찾아보니 NavLink 컴포넌트가 정상 작동을 하지 않았다. 그 과정에서 작성하게된 글이다. React Router란? 주소에 따라 다른 뷰를 보여주는 것을 라우팅이라고 한다. 이 때 SPA 특성상 페이지를 새로고침하지 않으면서 화면을 전환해주어야 한다. 라우팅은 rea.. 이전 1 2 다음
