반응형 useState3 useState와 클로저 useState와 클로저 함수형 리액트에서 컴포넌트가 리렌더링 된다는 것은 함수가 종료되었다가 다시 실행되는 것이다. 그럼 종료된 함수가 갖고 있던 state를 어떻게 기억하고 이전 state와 현재 state를 비교하는 걸까? 답은 클로저에 있다. 클로저 클로저는 함수가 생성될 당시의 환경을 함수가 종료된 후에도 기억하는 속성이다. 아래 코드에서 볼 수 있듯, add()함수가 종료되고 재 실행되어도 foo 변수의 이전값을 기억하고 foo += 1을 수행하고 있다. // 참고 : https://www.fronttigger.dev/2022/react/react-hook-closure const add = (function getAdd() { let foo = 1 return function () { foo.. 2023. 9. 13. useState와 클로저 스터디에서 리액트 공식문서로 공부를 하고 있다. 어떤 분이 함수형리액트, 특히 useState를 이해하기 위해서는 클로저를 꼭 이해해야 한다는 말씀을 하셨다. 그말은 내가 useState,useEffect 등의 훅을 사용할 때 원리를 모른채, 사용 설명서만 외워두고 사용하고 있다는 것 을 상기시켜주었다. 저번주에 스터디를 마무리를 하면서 클로저가 어떻게 함수형리액트에 사용되는지 알아보자고 이야기를 했고 모든분들이 찬성해주셨다. 3일동안 한글자 한글자 천천히 읽었는데, 조금 이해가 가는 것 같다. 하지만 느낌만 알 뿐, 유창하게 설명할 정도는 아니다. 클로저 클로저 , 어렵다. 내가 내린 정의는 다음과 같다.(사실 구글링짬뽕) 함수가 생성되었을때 접근가능한 스코프를 기억하고, 전혀 다른 환경에서 실행될 때.. 2022. 11. 23. state를 직접 변경하지 않고 useState로 변경해야 하는 이유 그냥 리액트는 변수가 state고 변경할땐 useState쓰는거야! 라고 생각해왔다가 오늘 한번 이유를 생각해보았다. state가 변경될때 업데이트되기 때문에?? 그럼 왜 직접변경은 안되고 꼭 useState로 변경시켜야할까?? 이유는 리액트가 객체의 메모리주소 를 비교하기 때문이다. 직접 변경하면 값만 변경되고 메모리주소는 변경되지 않으므로, state변화를 알아채지 못한다. => 리렌더링 x, 화면이 업데이트 되지 않음 const [name,setName] = useState(' '); 여기서 setName은 name을 변경하는 것이 아니라, 메모리 어딘가에 있는 값(메모리주소)을 변경하는 것이다. 그 후 name과 관련된 DOM이 리렌더링 된다. 참고1 참고2 2022. 10. 7. 이전 1 다음 반응형
