Typescript

interface를 작성해서, 배열을 만들었고, 그렇게 만든 배열을 props로 다른 컴포넌트에 전달했다.이런 경우 Typescript에서는 props를 전달받는 컴포넌트에도 별도로 타입을 지정해줘야하는데, 다시 전부 작성하는 귀찮은 상황을 막기 위해서 export,

프로젝트를 진행하던 중 배열(Array)의 원소로 객체(Object)가 들어가야하는 상황이 있었다. 그 외에 string 타입도 들어가는 상황이었는데, Typescript에서는 이들의 타입을 일일이 정해줘야하므로 당혹스러웠다. 어떻게 하면 될까?우선 필자가 만들고자 했

캐러셀 슬라이드를 구현하던 도중, 자동으로 슬라이드가 넘어가게 하기 위해서 setInterval()을 사용하려고 했다.그런데, 기능 활용법을 알아보던 중 React에서는 setInterval()의 동작이 의도한대로 작동하지 않는다는 글들이 쏟아져 나왔다. 무엇이 문제일

useRef로 컴포넌트 하나를 ref로 참조하고, 그 컴포넌트의 style을 조정하려고 current를 사용하는 순간...! 붉은 줄이 쳐진다...(IDE는 VSC)도저히 무슨 에러인지 알 수가 없는데, 해결책을 찾아보자.필자는 아래와 같은 코드를 작성했었다.div 태

useRef는 current에 어떠한 값을 담고있는 상자를 만드는 React Hook이다.그 이상 그 이하도 아니다. 예를 들어보자.위 코드에서 exRef는 그저 1의 값을 담고있는 상자에 불과하다.우린 current를 통해서 useRef에 있는 값을 사용할 수 있게

React로 프로젝트를 진행하다보면 useState의 setState 부분을 다른 컴포넌트에 props로 전달 할 때가 있다.Typescript에서는 props로 전달되는 것들의 타입을 항상 지정해줘야하는데 setState의 경우는 어떤 타입을 명시해줘야할까?아래와 같

React에서 react-router-dom 라이브러리를 사용하여 Link 태그에 props를 전달하는 일이 가끔 있다.Typescript와 React를 함께 쓸 때 예전 방법 그대로 작성했더니 오류가 발생했다.해결방법을 알아보자!Typescript에서는 props를

리덕스 자체도 굉장히 어려운 편에 속한다고 생각하는데, TS까지 섞여버리면 머리가 아프다..그치만, 크게 문제될 것은 없다.타입만 지정해주면 되기 때문에!이번에는 Typescript + React에서 기초적인 Redux 사용법을 기록하고자 한다.thunk나 promis

문제 상황 > Arrow Function Regular Function

문제 상황 > 필자가 토이 프로젝트를 진행 중에 마주한 고민이다. useRef를 통해서 특정 요소 클릭 시 특정 이미지로 스크롤이 이동하도록 구현하고자 했다. 이 때, 이미지가 5개 사용되었고, 따라서 useRef가 5개 필요했다. 많은 양이 아니기 때문에 하나하나 u

Redux를 사용하던 중 Redux Toolkit(RTK)이라는 상위 버전 라이브러리를 알게되었다. Redux 사용시 부수적으로 필요한 각종 라이브러리를 일일이 설치하고, 불변성을 지키는 등 귀찮은 것들을 대폭 완화하여 출시된 "공식 라이브러리"로 특히나 Typescr