반응형 전체 글352 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. 북클럽 클린코드 10장. 클래스 클래스 체계클래스를 정의하는 표준 자바 관례에 따르면가장 먼서 변수 목록이 나온다.정적 공개 상수가 있다면 맨 처음에 나온다.다음으로 정적 비공개 변수가 나오며이어서 비공개 인스턴스 변수가 나온다.공개 변수가 필요한 경우는 거의 없다.변수 목록 다음에는공개 함수가 나온다.비공개 함수는 자신을 호출하는 공개 함수 직후에 넣는다.클래스는 작아야 한다클래스는 작아야 한다.더 작아야 한다.작게가 기본 규칙이다.그러면 얼마나 작아야 하는가?함수는 물리적인 행 수로 크기를 측정했다.클래스는 다른 척도를 사용한다.클래스가 맡은 책임을 센다.메서드 개수도 작아야 하지만메서드 개수만 작다고 책임도 작은건 아니다.클래스 이름클래스의 책임을 기술한다.간결한 이름이 떠오르지 않는다면 필경 클래스 크기가 너무 커서 그렇다.클래.. 2024. 7. 9. 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. 이전 1 2 3 4 ··· 59 다음 반응형
