코딩 정보56 [React] 재활용성이 좋은 modal 만들기 목차범용성이 좋은 modal componentimport { useEffect, useRef } from "react";import { createPortal } from "react-dom";function Modal({ children, className = "", open, onClose }) { const dialog = useRef(); useEffect(() => { //참조값을 지정해 놓기 const modal = dialog.current; if (open) { modal.showModal(); } return () => { modal.close(); }; }, [open]); return createPortal( .. 2024. 8. 10. [React] useEffect의 실행 시점에 대해 알아보자 목차 useEffect의 실행 시점import { useEffect } from "react";function Practice(){ console.log('1'); useEffect(()=>{ console.log('mount'); }, []); console.log('2'); return }export default Practice; 컴포넌트의 랜더링이 끝난 후 useEffect가 실행된다는 것을 알 수 있다. 위에서 콘솔에 두번 찍힌 것은 React의 엄격 모드 때문에 두번 실행된 것이다. 클린업 함수의 실행 시점import { useEffect, useState } from "react";function Practice() { const [input, se.. 2024. 8. 9. [React] form 양식 다루기 (사용자 유효성 검사) 목차 Form 제출 다루기아래와 같이 코드를 짜면 양식 요소에서 서버 요청을 하기 때문에 새로고침이 일어나 리액트에서는 올바르게 작동하지 않는다.export default function Login() { function handleSubmit() { console.log("submitted!"); } return ( Login Email Password Reset Login );} 따라서 아래와 같이 코드를 짜서 새로고침을 막을 수 있다.export default functio.. 2024. 8. 2. [React] Custom Hook에 대해 알아보자 목차 Custom Hook의 정의리액트 훅의 첫번째 규칙은 리액트 훅은 리액트 컴포넌트안에서만 사용해야 한다.이 첫번째 규칙을 더 유연하게 만들어 주는 것이 Custom Hook으로 컴포넌트에들어가 있는 함수를 감싸고 재사용하게 해준다. 즉 반복되는 로직을 하나로 묶어 재사용하기 위한 자신이 만든 Hook을 말한다. 아래와 같이 구조가 반복되는 코드예 useEffect(() => { async function fetchUser() { setIsLoading(true); try { const places = await fetchUserPlaces(); setUserPlaces(places); setIsLoading(false); } ca.. 2024. 7. 31. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음 728x90
