개발/React11 이미지 화면 동적으로 프린트하기 window.print() ✔ 시작이미지파일 위에 동적으로 사용자 정보를 출력하려고 한다.새 창으로 프린트 할 화면을 띄우고, 그 화면을 프린트하는 방법을 구현하기로 선택했다. 환경React,Next,Typescript✔ 과정export default function Print({ 정보1 imageUrl,}: TProps){ const handlePrint = (): void => { const printWindow = window.open('', '_blank'); if (printWindow) { const htmlContent = ` ${정보1} .. 2024. 7. 21. [React-Hook-Form] 리액트훅폼 isDirty 와 dirtyFields 의 차이 React Hook Form 의 formState 에 isDirty 와 dirtyFields 가 있는데 둘의 차이가 무엇인지 궁금해서 화면에서 값을 찍어보며 테스트를 해봤습니다. 알게 된 둘의 차이를 정리해둘게요! ✔ 개념 isDirty와 dirtyFields는 React Hook Form 라이브러리에서 사용되는 용어로, 폼의 입력값이 변경되었을 때를 감지하는 기능을 제공합니다. ✔ 차이 isDirty isDirty는 전체 폼(form)의 dirty 상태를 나타내는 boolean 값입니다. 폼 내에서 어떤 입력 필드(input field)가 변경되었는지에 관계없이, 한 번이라도 input이 변경되었다면 isDirty는 true를 반환합니다. dirtyFields dirtyFields는 객체 형태로, 변경.. 2023. 5. 28. [오류]Could not resolve dependency:npm ERR! peer react@"^17.0.1" from @toast-ui/react-editor@3.2.2 ✔ 문제 게시판 form 에 toast-ui editor를 사용하려고 하는데 다음과 같은 오류가 발생했습니다. 지금 제 react 버전과 맞지 않아서 생긴 오류로 보이는데 editor 때문에 리액트 버전을 낮추고싶지는 않았어요 ✔ 해결과정 다른 editor를 사용하는 방법도 있지만, 우선 한국어가 잘 적용되는 toast-ui editor를 사용하고 싶었습니다. 캡쳐 화면을 보면 --force 를 붙여서 충돌을 우회하든지 --legacy-peer-deps로 충돌을 무시하라고 나와있어요. 저는 --force로 충돌을 우회하였습니다. npm install --save @toast-ui/react-editor --force 우선 import 하는데 까지는 성공했습니다. 그런데 좋아보이진 않아요. warning이.. 2022. 11. 6. [React] useRef 와 useState 개념, 차이 전에 정리하려고 했던 useRef(), useState() 차이를 설명해보겠습니다. ✔ 개념 useState( ) 란? const [state, setState] = useState(initialState); 상태 유지 값(state) 과 그 값을 갱신하는 함수(setState) 를 반환합니다. setState 함수는 state 를 갱신할 때 사용합니다. initialState 인자는 초기 렌더링 시에 사용하는 state입니다. 그 이후의 렌더링 시에는 이 값은 무시됩니다. const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); return initialState; }); // 예시 co.. 2022. 10. 18. 이전 1 2 3 다음
