728x90 반응형 리액트7 [My Projects] 계산기에 onKeyDown 이벤트 적용하기! 들어가며 얼마 전에 만든 계산기에 onKeyDown 이벤트를 추가했다. 기능 구현은 생각보다 간단했는데 미처 발견하지 못했던 자잘한 버그들이 발생했고 잡는 데 꽤 애를 먹었다. 리팩토링을 거치긴 해야 할 텐데 함수마다 조건문을 무지성으로 휘갈겨놓은 탓에 어디서부터 손을 봐야 할지 감이 잡히질 않는다. 무튼 키보드로 계산기를 조작하는 데 필요한 코드들을 설명해보겠다! onKeyDown 이벤트 구현 코드 const handleKeyDown = (e: React.KeyboardEvent) => { const key = e.key; if (!isNaN(+key) && totalNumber) { handleReset(); if (inputValChecker(inputNumber, key)) { setInputNu.. 2022. 9. 7. [React] onKeyDown 이벤트로 enter 검색 구현하기! 위처럼 input의 값을 읽어와서 무언가 이벤트를 발생시킬 때 button을 일일이 클릭하자니 귀찮았다. enter키를 눌러 검색을 구현할 수 없을까 해서 찾아보니 'onKeyDown'을 활용하면 된다고 나왔다. 우선 값을 읽어올 input에 onKeyDown을 적용하고 키보드의 키를 누를 때 console.log를 찍어보면 3번째 사진과 같이 key 프로퍼티에 방금 누른 키가 값으로 할당됨을 볼 수 있다. 따라서 활용하고자 하는 함수에 조건문을 걸어 e.key의 값이 'Enter'가 아닐 경우 return되게 하면 엔터키를 눌렀을 때 특정 함수가 실행되도록 구현할 수 있다. 함께 보기 https://www.w3schools.com/jsref/event_onkeydown.asp onkeydown Even.. 2022. 9. 6. [React] 리액트에서 로컬 이미지 불러오기! 포켓몬 도감을 만들다가 이미지를 제대로 삽입했는데도 경로를 못 읽어와서 한참을 헤맸다. 답은 일반적인 html에서 작업할 때처럼 상대 경로를 주는 것이 아니라 아래처럼 public 폴더 내 이미지를 저장할 폴더를 따로 만들어 절대 경로로 설정하는 것이었다! 이처럼 index.html이 들어 있는 public 폴더 내에 img 등 static 파일을 따로 모은다. 이렇게 모은 이미지 파일을 불러올 때는 절대 경로를 설정하면 성공적으로 불러와진다. 위와 같이 불러온 이미지를 활용하여 css의 hover를 적절히 섞으면 아래와 같이 재미난(?) 효과를 구현할 수 있다. 이 밖에 이미지를 불러오는 다양한 방법은 아래 블로그를 참조하길 바란다. [코딩 이야기 님의 블로그] 2022. 9. 5. [My Projects] 리액트로 계산기 만들기! feat. TypeScript 들어가며 개인 사이드 프로젝트로 재무관리 앱을 만들고 있는데 기능 중 하나로 계산기를 추가하고 싶었다. 언뜻 보기에는 계산기 그까이꺼 사칙연산만 대충 구현하면 되는 거 아닌가?!?! 싶어서 후딱 끝낼 줄 알았는데 주말 이틀을 꼬박 매달리고서야 완성했다. 처음부터 타입스크립트를 적용하려 하니 아직 사용법에 익숙치 않아서 이곳저곳 뻥뻥 터지는 에러들을 잡아내기 바빠 작업이 전혀 진전되지 않았다. 이대로는 답이 없을 것 같아 우선 순수 리액트로 작업을 마친 다음 복붙을 하여 오류가 뜨는 부분만을 잡아나가는 식으로 작업 방식의 가닥을 잡았다. 기본 구상 계산기의 전체적인 스타일링은 styled-components를 활용하였다. styled-components로 스타일을 적용하니 자주 쓰이는 style-set을 .. 2022. 9. 5. [React Hooks] useEffect 이번 글은 'Reack Hooks in Action'의 'Chapter 4. Working with side effects'의 내용을 요약 정리한 것입니다. 들어가며 컴포넌트 내에 일어나는 부수 효과(side effects)에 대해 알아본다. useEffect Hook으로 부수 효과를 감싼다. 종속성 목록(dependency list)를 명시함으로써 effect가 실행되는 경우를 통제한다. effect에서 cleanup 함수를 반환한다. 컴포넌트에 쓰이는 fetch 데이터에 effect를 활용한다. 부수 효과가 발생하는 경우들 페이지 제목을 강제로 설정 setInterval, setTimeout 등 timer 함수로 작업 DOM 내 요소의 너비, 높이, 위치 등을 측정 console. 혹은 다른 서비스에.. 2022. 8. 5. [React Hooks] useReducer 이번 글은 'Reack Hooks in Action'의 'Chapter 3. Managing component state with the useReducer Hook'의 내용을 요약 정리한 것입니다. 들어가며 useReducer를 호출하여 여러 연관된 값을 관리하기 위해 React에 요청한다. 컴포넌트 상태 관리 로직을 한 곳에 담는다. reducer에 액션을 dispatching함으로써 상태를 갱신하고 리렌더링을 일으킨다. 초기 인자와 초기 함수를 통해 초기 상태를 설정한다. useReducer의 기본 개념 reducer는 상태에 대한 분명한 액션으로써 집중되고 명확히 정의된 방식으로 상태 변화를 관리하는 데 도움을 준다. reducer는 이전 상태에서 새로운 상태를 만들어내는 데 액션을 사용한다. 상.. 2022. 8. 1. [React Hooks] useState 이번 글은 'Reack Hooks in Action'의 'Chapter 2. Managing component state with the useState Hook'의 내용을 요약 정리한 것입니다. 들어가며 useState를 호출하여 React에게 컴포넌트 state의 값을 관리할 것을 요청한다. updater 함수를 통해 state의 값을 바꾸고 리렌더링을 일으킨다. 새로운 state의 값을 생성하기 위해 이전 state를 활용한다. 여러 state의 값을 관리한다. React와 컴포넌트가 어떻게 state를 유지하고 갱신하는지, 그리고 state와 UI가 동기화하는지 고려한다. Class 컴포넌트에서 useState를 쓸 때 this.setState에 새로운 state를 입력하면 React가 알아서 이.. 2022. 7. 31. 이전 1 다음 728x90 반응형
