반응형 React6 [React, Next.js] useEffect를 사용해서 값이 변경될 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 값이 변경될 때 제어코드 React 값이 변경될 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent(data) { useEffect(() => { // 렌더링 이후 실행할 코드 console.log('data 값이 설정'); return () => { // 컴포넌트가 사라질 때 실행되는 코드 console.log('data 값이 설정 전'); } }, [data]); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 1. 처음에 페이지가 렌더링 됐을 때 L4의 콘솔이 찍힌다. 2. props로 받은 data값이 변경될 때 L4의 콘솔이 찍힌다. 3. data값이 변경되기 직전에 L7의 콘.. 2023. 3. 17. [React, Next.js] useEffect를 사용해서 컴포넌트가 사라질 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 컴포넌트가 사라질 때 제어코드 React 구성 요소가 사라질 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent() { useEffect(() => { return () => { // 컴포넌트가 사라질 때 실행되는 코드 } }, []); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 컴포넌트가 사라질 때(컴포넌트가 언마운트 될 때) L4주석부분의 코드가 실행된다. 2023. 3. 17. [React, Next.js] useEffect라는 Hook을 사용해서 렌더링 후 코드실행 [React, Next.js] 렌더링 후 코드 실행을 위한 React Hook, useEffect라는 Hook을 사용해서 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 제어 코드 React 구성 요소가 렌더링된 후 일부 코드를 실행해야 할때 사용하는 코드이고 useEffect Hook은 다음과 같이 사용된다. function HookComponent() { useEffect(() => { // 렌더링 이후 실행할 코드 }); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 렌더링 후(컴포넌트가 마운트 됐을 때, 처음 나타났을 때) L3 주석부분의 코드가 실행된다. useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.. 2023. 3. 17. [React, Next.js] 모달(Modal) 구현_2 (recoil을 통한 제어) [React, Next.js] 모달(Modal) 제어부 (실제 모달 제어부분) 1. 전역관리 도구인 recoil을 통해 모달 컴포넌트를 제어하는 각 컴포넌트 파일들 예제 코드 import { useRecoilState } from "recoil"; const [modalState, setModalState] = useRecoilState(atomModalState); - recoil이 필요하므로 modal을 제어할 컴포넌트에서 recoil을 import해준다. - useRecoilState로 recoil의 atom을 제어한다. 2. 전역적으로 모달 상태 선언 및 초기화를 해주는 전역관리 도구인 recoil의 atom을 모아놓은 atom.ts 파일 예제 코드 export const aModalState =.. 2023. 2. 22. [React, Next.js] 모달(Modal) 구현_1 (react-modal을 통한 생성) [React, Next.js] 모달(Modal) 생성 부 (모달 관련 파일 생성부분) 1. import ReactModal from "react-modal" 사용해 구현한 modal.tsx파일 http://reactcommunity.org/react-modal/ react-modal documentation react-modal Accessible modal dialog component for React.JS We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility .. 2023. 2. 22. [React] 뒤로가기 방지 [React, Next.js] 뒤로가기(이전 페이지 가기) 방지 const preventGoBackHandler = () => { history.go(1); }; useEffect(() => { window.addEventListener("popstate", preventGoBackHandler); return () => { window.removeEventListener("popstate", preventGoBackHandler); }; }, []); history.go를 이용해 뒤로가기를 막는 효과이다. * 사실 뒤로가기 자체를 막는 로직은 아니고 뒤로가고 앞으로 오는 로직이지만 UX적으로는 현재 페이지에 머물러 있는다. hisyoty.go 2023.02.12 - [분류 전체보기] - [js] his.. 2023. 2. 12. 이전 1 다음 반응형