반응형 클로저4 렉시컬환경과 클로저, 그리고 React에서 이전 state를 기억하는 방식 렉시컬환경 렉시컬환경은 실행중인 함수와 코드블록을 포함하는 검색범위인데, 쉽게 이해하려면 코드블록과 연관지어 이해하는 것이 편하다. 변수에 접근할 땐, 내부 렉시컬 환경 -> 외부 렉시컬 환경 -> 외부 2 렉시컬 -> 전역 렉시컬 환경으로 검색범위를 확장한다. 아니면 그냥 스크린샷이라고 생각하자. 리액트 함수 컴포넌트에서의 렉시컬환경과 클로저 클로저 클로저는 '내부함수가 자신이 선언되었을때의 환경 을 기억하는 성질' 라는 글도 있고, 클로저는 '외부 변수를 기억하고 이 외부 젼수에 접근할 수 있는 함수' 라는 글도 있다. 어쨌든, new Function으로 만든 함수를 제외한 모든 JS의 함수는 클로저이다 . 함수는 호출 할 때마다, 새로운 렉시컬 환경이 생성되고 외부 변수는 마지막 접근했던 당시의 렉.. 2023. 12. 16. 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. js 클로저 1. 클로저의 개념 클로저를 MDN에서 찾아보면 '함수와 함수가 선언된 어휘적 환경의 조합' 이라고 나와있다. 무슨말인지 모르겠다. 다행히 코드스테이츠에서 이해하기 쉽게 설명을 해주었다. 그걸 내가 한문장으로 요약해봤는데, 여러분들에게도 알려주자면 함수를 리턴하는 함수일때 리턴당하는 내부함수가 외부함수의 변수에 접근할 수 있다면, 리턴되는 내부함수를 클로저라고 함. 한편, 클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분된다. 클로저의 핵심은 스코프를 이용해서 변수의 접근 범위를 조정하는 것에 있다. 함수를 리턴하는 것 만큼 중요한 것이 변수가 선언된 곳이다. 보라색 block이 외부함수, 노란색 block을 내부함수라고 하면 adder는 함수를 리턴하는 함수이고 내부함수는 외부함수의 변수.. 2021. 8. 4. 이전 1 다음 반응형
