반응형 개발/React52 useState 동기화 하는 2가지 방법 useState 리액트를 조금만 해본 사람이라면 알겠지만 useState의 setState는 비동기로 동작한다. 이번에 회사에서 업무를 하면서 어떤 handler가 setState가 완료된 후에 동작하는것을 보장해야 하는 상황이 있었다. 당연히 예상하겠지만, 이 코드는 setState가 끝나기 전에 handleToBottom이 실행된다. 혹시 이해가 안가면 여기서 실험할 수 있음 {setState(newState); handleToBottom();}}/> setState가 끝난 후 handleToBottom이 실행되는 것, 즉 setState를 동기화하는 두가지 방법이 있다. 1. useEffect useEffect의 의존성배열을 이용하면 특정 state가 변화할때 동작시키고 싶은 callback함수를 .. 2023. 2. 28. react 18로 업글시 children 타입에러 : Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. 구글에 react.fc를 검색하면 react.fc를 쓰지 말라는 글이 많다. (react.fc 축구팀 같기도..) react.fc의 타입에 children을 옵셔널로 포함하기 때문에 , children이 들어가지 않아야 할 상황을 잡지 못하는 이유에서이다. 이는 react 18 이전까지의 이야기다. react,react-dom,@types/react-dom을 업그레이드 하자 children에러가 나타났다. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. 이제 react 18에서는 컴포넌트의 타입에 children을 포함하지 않는다. 그래서 children을 별도 타입지정해주지 않으면 '야 c.. 2023. 1. 30. useState와 클로저 스터디에서 리액트 공식문서로 공부를 하고 있다. 어떤 분이 함수형리액트, 특히 useState를 이해하기 위해서는 클로저를 꼭 이해해야 한다는 말씀을 하셨다. 그말은 내가 useState,useEffect 등의 훅을 사용할 때 원리를 모른채, 사용 설명서만 외워두고 사용하고 있다는 것 을 상기시켜주었다. 저번주에 스터디를 마무리를 하면서 클로저가 어떻게 함수형리액트에 사용되는지 알아보자고 이야기를 했고 모든분들이 찬성해주셨다. 3일동안 한글자 한글자 천천히 읽었는데, 조금 이해가 가는 것 같다. 하지만 느낌만 알 뿐, 유창하게 설명할 정도는 아니다. 클로저 클로저 , 어렵다. 내가 내린 정의는 다음과 같다.(사실 구글링짬뽕) 함수가 생성되었을때 접근가능한 스코프를 기억하고, 전혀 다른 환경에서 실행될 때.. 2022. 11. 23. TIL : onBlur때문에 onClick이 실행되지 않을 땐, onMouseDown을 사용 setVisibleUlTag(!visibleUlTag)} onBlur = {()=>setVisibleUlTag(false)} > n개씩보기{visibleUlTag ? {array.map(el)=> n개씩보기} : null} button클릭li태그 노출li태그 클릭시 onClick이 실행되기 전에 button태그의 onBlur가 실행되며 li태그가 사라짐 onClick에 e.preventDefault()를 걸어도 마찬가지이다. onClick이 실행되기전에 onBlur에 의해 태그가 사라지기 때문태그는 클릭되지 못한 채로 사라졌다. 처음에는 setTimeout 0.2초를 걸었다. 하지만 좋은 방법은 아닌것같았다.const closeOpti.. 2022. 11. 4. 이전 1 2 3 4 5 6 7 8 ··· 13 다음 반응형
