✨ useRef 은 mutable ref object를 리턴함. reference는 read-only이거나 mutable하다. read-only : 읽기 전용 / mutable : 변경 가능한. ref 객체를 리액트에 전달하면 리액트는 속성에 상응하는 DOM node값을 set한다. 여기서 중요한 것은 는 마운트 될 때 DOM node에 set되고, DOM node가 사라지면 로 변경된다. 즉 useRef()는 초기 값을 그대로 읽거나 혹은 초기 값에서 변경되는 값을 사용한다. useRef()는 언제 사용할까? 📍 옵션 1: DOM Element Ref 주로 useRef()를 사용하는 방법 중 하나는 DOM element를 참조할때이다. 초기 값은 로 설정한다. 이때는 DOM 엘리먼트를 참조하는 것이기 때문에 값은 읽기-전용으로 사용된다. DOM Element를 참조할 때는 어떤 엘리먼트를 참조하는지 type을 지정해준다. >>>> 👉 최대한 자세하게 타입을 지정해준다. 만약…

인데 할당되기 전에 사용되었다고? 예시를 들어보자 분명 let age로 선언되었는데 왜 저런 에러가 뜰까? 우리는 여기서 알아야 한다. 는 할당(assigned) 된 것이 아니라 선언(declare) 된 것이다. 여기서 알 수 있는 것은 만약에 if문이 실행되지 않으면 는 선언만 되었을 뿐 할당되지 않았다. 즉 전혀 할당되지 않은 것이다. 근데 왜 할당되지 않은 것일까? 해답은 여기있다 우리가 age를 number type으로 지정하였기 때문에 다른 값이 들어오면 에러가 뜨게 된다. ✨ 해결 방법 undefined 값도 괜찮은 경우 : 초기 값인 undefined도 함께 타입으로 지정해준다. 무조건 number 타입으로 지정될 경우 : Definite Assignment Assertions을 사용한다. Definite Assignment Assertions이란 컴파일러에게 값이 무조건 할당되어 있다고 컴파일러에게 전달하는 경우이다. 즉 처음은 으로 지정되지만 값이 할당되면 numb…

타입스크립트와 EventTarget 타입스크립트를 사용하면서 이벤트 타깃을 사용하면 종종 에러를 마주하곤 한다. 빠르게 그 이유를 말하자면, EventTarget은 Element type으로부터 상속받지 않기 때문에 에러를 만나게 되는 것이다. 그렇기에 id 혹은 class와 같은 속성을 인지하지 못하는 것이다. 즉, 이벤트 타깃은 EventTarget의 타입이 있다. 그럼 왜 Element type에서 상속받지 않는 것일까? 나도 이 생각을 가장 많이 했다. 결론적으로 우리가 이벤트를 실행시킬 때 가장 많이 하는 일은 앨리먼트에 이벤트를 붙이기 때문이다! 하지만 우리가 알아야 할 것은 모든 이벤트 타깃이 HTML elements에 한정되지 않는 다는 것이다 예를 들면, , , , 등.. ✨ 해결방법1 : Target의 타입을 지정해준다. e.target이 Element라는 것을 알려준다. inline으로 사용한다. 만약에 이벤트의 target 속성만 사용할 경우 이렇게 적어준다…

1. Property ‘getBoundingClientRect’ does not exist on type ‘EventTarget’.ts(2339) 타입스크립트 event.target 대신 사용할 수 있는 해답 적당히 해석해보면 React.MouseEvent는 target 대시 parameter로 currentTarget을 받을 수 있다는 내용이다. 출처: https://github.com/facebook/react/issues/16201 1. Property ‘getBoundingClientRect’ does not exist on type ‘EventTarget’.ts(2339)