반응형 개발/React54 부분렌더링 Input 컴포넌트 보통 리액트에서 input에 무언가를 입력할때는 다음과 같이 input 외부에서 state를 선언후에 input에 props로 전달한다. const [state, setState] = useState(""); return ( setState(e.target.value) } /> ) 문제는 depth가 깊어지고 state가 root에 선언되어있다면, 다음과 같이 input에 하나만 입력해도 형제컴포넌트까지 리렌더링되는 현상이 발생한다. 이를 해결하기 위해 Input 내부에서 state관리를 하고, props에는 객체를 내려주는 방식을 회사 동료분이 소개 해 주셨다. // root에서 props로 전달받는 data = [{name:"june"},{name:"seung"}] const A2Component =.. 2023. 3. 1. 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. useEffect cleanup은 state초기화 이후에 실행된다. 밑에 글 다 헛소리임. 클로저 문제임요약컴포넌트 언마운트 과정 : DOM업데이트 + useState 초기화 -> cleanup 실행 -> 언마운트예전에 useEffect cleanup함수가 componentWillUpdate가 아니라 componentDidUpdate에서 실행된다는 것을 알게되어 글을 쓴 적이 있다. useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다!들어가기에 앞서 결론부터 말하자면 공식문서에 나와있다! 실제 실험을 통해 페이지 이동(unmount)이 안되어도 setInterval을 정리하여 버그를 차단함을 알 수 있음 1. clean-up 없을 때 import { useEffect, uswnsdufdl.tistory.com 사이드를 하다가 문제.. 2022. 12. 10. 이전 1 2 3 4 5 6 7 8 ··· 14 다음 반응형
