728x90 반응형 React23 [react] useContext Hook + 예제 useContext의 탄생 배경 react에서 상위 컴포넌트에서 하위 컴포넌트를 데이터를 전달해야하는 케이스는 자주 발생합니다. 일반적으로 props를 이용하여 데이터를 전달할 수 있지만, 상위 컴포넌트와 하위 컴포넌트 사이에 여러개의 중간 컴포넌트가 있는 경우에는 이 과정이 매우 번거롭습니다. 이 때 사용하는 것이 useContext입니다. 물론 redux를 사용할 수도 있습니다. 즉, 데이터를 전역적으로 관리하고 전달하는 경우 편리하게 하기 위해 useContext를 사용합니다. useContext Hook useContext는 리엑트의 Context API를 사용하여 구현합니다. 1. createContext 함수를 사용하여 새로운 Context 객체를 생성하고, 2. 이후 useContext Ho.. 2023. 4. 26. [react] useRef Hook + 예제 useRef의 탄생 배경 JS를 사용하면서 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector와 같은 DOM 선택자 함수를 사용한다. react를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어, 특정 엘리먼트의 크기를 가져와야 한다던가, 스크롤바 위치를 가져오거나 설정해야 한다던가 등의 상황 등이 있다. 추가적으로 HTML 5 Video 관련 라이브러리(Video.js), 그래프 관련 라이브러리(chart.js) 등 외부 라이브러리를 사용할 때에도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다. 이때, 리엑트에서 ref라는 것을 사용한다. useRef Hook 함수형 컴포넌트에서 ref를 사용.. 2023. 4. 26. [React] 값을 수정할 때 페이지가 번쩍 거리는 현상 제거하기 페이지가 번쩍 거리는 현상 위의 동영상에서 확인할 수 있듯이 Todo를 수정하고 제출했을 때 뭔가 번쩍 거리는 듯한 느낌이 있다. 일단 결론부터 말하면, 투두를 수정할 때 updateTodoApi를 호출하게 되는데 updateTodoApi는 또 getTodoApi를 호출하고 있었기 때문이다. 여기서 updateTodoApi는 데이터를 수정할 때 발생하고, getTodoApi는 화면에 그릴 데이터를 가져올 때 발생한다. 처음에 이러한 방식으로 코드를 작성한 이유는 서버에 데이터를 저장하고 있기 때문에 수정한 데이터를 화면에 보여주기 위해서 getTodoApi를 계속해서 호출해야겠다고 생각했기 때문이다. 하지만 그러면 제목처럼 화면이 번쩍인다. 그 이유는, 통신을 하고 난 후에 화면에 데이터를 그리기 때문에.. 2023. 4. 15. [React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하는 법 주로 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하지만, 종종 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하고 싶은 경우가 있다. 부모 컴포넌트 import React, { useState } from "react"; import Child from "./components/Child"; function Parent() { const [todoList, setTodoList] = useState([]); return ; } export default Parent; 자식 컴포넌트 mport React, { useState } from "react"; function Child({ parentFunction }) { const [data, setData] = useState(2); parentFu.. 2023. 4. 12. [react] 웹에서 터치 스크롤 직접 구현하기 하나의 큰 안에 여러개의 이미지들이 있고, 이 이미지들을 트랙패드를 사용하는 것처럼 터치 스크롤을 구현하고자 했다. 터치 스크롤은 이미지 위에 마우스를 올리고 좌우로 스크롤 했을 때 이동한 위치에 있는 이미지를 보여주는 기능이다. 터치 스크롤 기능 미리보기 코드로는 어떻게 구현할 수 있을까? 1. 먼저 여러개의 이미지들을 담고 있는 가장 큰 에게 3개의 이벤트를 줄거다. onMouseDown, onMouseMove, onMouseUp 이벤트이다. onMouseDown은 마우스 왼쪽 버튼을 클릭했을 때, onMouseMove는 마우스를 움직였을 때, onMouseUp은 영역을 벗어났을 때 호출된다. 그리고 div에게 ref 속성을 주어 특정 DOM 즉, div를 선택할 수 있게 해줬다. 이렇게 구구절절 설.. 2023. 3. 20. 이전 1 2 3 4 5 다음 728x90 반응형
