반응형 개발/React54 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. React 튜토리얼에 있는 class형 컴포넌트.. 리액트 함수형만 하면서 자연스럽게 class에 대한 대부분의 정보를 잊게 되었다. class는 Object 찍어내는 용도 말고는 사용법을 잘 모름.. Class는 Object 찍어내는 기계(코딩애플) https://www.youtube.com/watch?v=dHrI-_xq1Vo&t=318s 코딩애플에 class 영상을 보았다. 설명을 엄청 잘해준다. 진작에 볼껄 그랬다. class는 object 찍어내는 기계! 코딩애플에서는 롤로 예를 들었다. 100개가 넘는 wnsdufdl.tistory.com 여튼 공식문서 튜토리얼을 보면 본능적?으로 무슨 뜻인지 알겠는데 한줄한줄 설명할 수 없어서 this, extends등의 용어를 알아보았다. (객체지향언어로서의 원론적인 의미까지 찾아보지는 않았음) extends.. 2022. 11. 1. state를 직접 변경하지 않고 useState로 변경해야 하는 이유 그냥 리액트는 변수가 state고 변경할땐 useState쓰는거야! 라고 생각해왔다가 오늘 한번 이유를 생각해보았다. state가 변경될때 업데이트되기 때문에?? 그럼 왜 직접변경은 안되고 꼭 useState로 변경시켜야할까?? 이유는 리액트가 객체의 메모리주소 를 비교하기 때문이다. 직접 변경하면 값만 변경되고 메모리주소는 변경되지 않으므로, state변화를 알아채지 못한다. => 리렌더링 x, 화면이 업데이트 되지 않음 const [name,setName] = useState(' '); 여기서 setName은 name을 변경하는 것이 아니라, 메모리 어딘가에 있는 값(메모리주소)을 변경하는 것이다. 그 후 name과 관련된 DOM이 리렌더링 된다. 참고1 참고2 2022. 10. 7. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음 반응형
