https://transform.tools/json-to-typescript JSON to TypeScript Cadence struct to Go struct transform.tools 위 사이트를 이용하면 빠르고 간편하게 만들 수 있음 !!! 1. 개발자 도구에서 JSON.stringify(객체 데이터) 작성 후 엔터 2. 마우스 우클릭 후 문자열 복사 3. 왼쪽의 JSON 영역에 복사한 문자열 붙여넣기 오른쪽의 TypeScript 영역에 해당 객체 구조에 해당하는 interface 가 만들어짐

React Portal 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법을 제공함 모달 창을 만들 때 주로 사용됨 ReactDOM.createPortal(child, container) child : 렌더링할 수 있는 리액트 자식 요소 container : DOM 엘리먼트 자식 컴포넌트의 z-index 가 부모 컴포넌트보다 높더라도 부모 컴포넌트가 더 위로 올라오는 문제 해결 가능 index.html 에서 Container 생성 createPortal 사용 import React from 'react'; import ReactDOM from 'react-dom'; const Modal = ({ open, children, onClose }) => { if (!open) ..

forwardRef 컴포넌트에 ref prop을 전달해서 해당 컴포넌트 내부에 있는 DOM 에 접근을 가능하게 해줌 import { useRef } from 'react'; function App() { const inputRef = useRef(); const handleClick = () => { inputRef.current.focus(); }; return ( 클릭 ); } export default App; 버튼 클릭 시 input 요소가 정상적으로 focus 됨 import React from 'react'; const ChildComponent = ({ ref }) => { return ; }; export default ChildComponent; import { useRef } from ..

useRef 1. 변수 관리 시 사용 2. 특정 DOM 선택 시 사용 변수 관리 state 를 사용해서 state 가 변경되면 컴포넌트가 다시 렌더링됨 ref 를 사용하면 ref 가 변경되어도 다시 렌더링되지 않음 ref 값은 생명주기 동안 유지됨 useRef vs useState vs let import { useRef, useState } from 'react'; function App() { const [count, setCount] = useState(0); const countRef = useRef(0); let countVariable = 0; const increaseRef = () => { countRef.current++; }; const increaseState = () => { set..

useRef 변수 관리 시 사용 특정 DOM 선택 시 사용 state를 사용해서 state가 변경되면 컴포넌트가 다시 렌더링 됨 하지만 ref를 사용하면 렌더링 되지 않음 자바스크립트 getElementById, querySelector 같은 DOM Selector 함수를 사용해 DOM을 선택함 리액트 ref를 이용해 DOM을 선택함 DOM을 직접 선택해야 하는 경우 요소에 포커스를 설정해 주어야 할 경우 요소의 크기를 가져와야 할 경우 스크롤바 위치를 가져와야 할 경우 ... useRef 사용법 useRef()를 이용해 Ref 객체를 만듦 이 객체를 특정 DOM애 ref 값으로 설정함 Ref 객체의 .current 값이 특정 DOM을 가리키게 됨 // Ref 객체를 만듦 const ref = useRe..

Debounce 미리 정의한 시간 동안 이벤트의 처리를 지연시키고 미리 정의한 시간이 지난 후에 한 번에 반영을 해줌 hooks/useDebounce.jsx 생성 export const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { // 미리 정해진 딜레이 시간이 지난 후 업데이트함 const handler = setTimeout(() => { setDebouncedValue(value); }, delay); // timeout 호출 도중에 vale/delay가 변경되어 다시 호출되면 이전 타이머를 제거함 return () => { clearTimeo..