728x90 반응형 👩💻 Programming/React5 [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. [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 반응형
