반응형 스터디/2024 - 리액트 스터디7 setState Hooks 평문에 써보기 결론 : setState도 동등 비교 같은거 하는줄 알았는데 안하는줄 알았는데 한다. setState를 Hooks 평문에 쓰면 안된다왜 안될까?아래 코드를 실행하면 무한 루프를 돌다가 종료된다.왜 무한루프를 돌까?setter 함수가 리렌더를 발생시킨다.setter 함수에는 동일값인지 비교하는 부분이 없다. setter가 호출되면 무조건 리렌더가 발생한다.중간중간에 초기값이 들어갔다 나오는 이유는 알수 없음.import React,{useState, useEffect} from 'react';export function App(props) { const [state, setState] = useState(10); useEffect(()=>{ setState(1); console.log("init.. 2024. 8. 3. Strict Mode 와 useEffect의 cleanUp 함수 사례 클린업함수 만드는 방법 https://ko.react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development 순수함수를 유지하는 방법 https://ko.react.dev/learn/keeping-components-pure 왜 ref는 의존성 배열에서 생략해도 되나요? https://ko.react.dev/learn/synchronizing-with-effects#why-was-the-ref-omitted-from-the-dependency-array 다시 호출해도 문제 없으면 그냥 둬라 Dialog modal open 처럼 두번 호출하면 에러나는경우 close 를 달아줘야함 https://ko.r.. 2024. 7. 13. 3.1.10 useDebugValue 커스텀 훅에 디버그 값을 달아둘 수 있다.DevTools 화면에서 나옴https://react-ko.dev/reference/react/useDebugValuehttps://codesandbox.io/p/devbox/react-dev-forked-7k2h9z?file=%2Fsrc%2FuseOnlineStatus.js%3A28%2C1&welcome=trueimport { useSyncExternalStore, useDebugValue } from "react";export function useOnlineStatus() { const isOnline = useSyncExternalStore( subscribe, () => navigator.onLine, () => true, ); co.. 2024. 7. 13. 3.1.9 useLayoutEffect https://react-ko.dev/reference/react/useLayoutEffect특징useEffect와 동일한 문법과 기능을 제공호출 순서가 다르다.useEffect는 브라우저에 변경 사항이 반영된 이후에 실행useLayoutEffect는 브라우저에 변경 사항이 반영되기 전에 실행실행 순서리액트가 DOM을 업데이트useLayoutEffect를 실행브라우저에 변경 사항을 반영useEffect를 실행주의점동기적으로 실행되어 useLayoutEffect가 렌더링 성능에 영향을 끼친다.useLayoutEffect가 끝날때까지 기다림React는 브라우저가 화면을 다시 그리기 전에 useLayoutEffect 내부의 코드와 그 안에서 예약된 모든 state 업데이트가 처리되도록 보장합니다. 이를 통해 .. 2024. 7. 13. useState, useEffect 동작 퀴즈 2 Q) 다음 콘솔에 출력되는 값은?import { useEffect } from "react";import { useState } from "react";export default function App() {const [state, setState] = useState(0);console.log("state : " + state);useEffect(() => {setState(1);return () => {console.log("state : " + state);}}, [state]);return App;}문제 설명useState와 useEffect의 동작 순서, 동작 방식을 알고 있는지?리액트 라이프사이클useEffect의 cleanUp 함수Cleanup 함수의 트리거 시점을 알고있는가! 문제입니다문제.. 2024. 7. 6. useState, useEffect 동작 퀴즈 1 Q) 다음 콘솔에 출력되는 값은?import { useEffect } from "react";import { useState } from "react";export default function App() { const [state, setState] = useState(0); console.log("state : " + state); useEffect(() => { setState(1); }, [state]); return App;}문제 설명useState와 useEffect의 동작 순서, 동작 방식을 알고 있는지?리액트 라이프사이클문제import { useEffect } from "react";import { useState } from "react";expor.. 2024. 7. 6. 이전 1 2 다음 반응형
