React, Next, Redux/⚛ React.TS 검색 결과

해당 글 3건

useRef의 3가지 종류로 살펴보는 타입 정의 확인의 중요성

tip) useRef가 중요한 것이 아니라 타이핑이 되어 있는 정의 부분으로 이동하여 살펴보는 것이 중요함을 강조하기 위함이고, useRef는 구체적인 실천의 예시일 뿐입니다. 일반 js를 사용할 때는 대두되지 않은 문제였지만, TS를 사용할 때 useRef에는 3가지 종류가 있습니다. @types/react 에서 정의된 useRef의 d.ts를 살펴보면(굳이 찾을 필요 없이 useRef에 ctrl + click하면 됩니다.) useRef에 3가지 종류가 있음을 확인할 수 있습니다. 정확히 말하자면 하나의 useRef인데 인자나 제네릭 타입에 따라 다른 것을 사용하도록 overload된 것입니다. (커서를 올려보면 +2 overloads가 있다고 확인할 수 있습니다) useRef에 커서를 올려보면 다음과..
React, Next, Redux/⚛ React.TS 2020. 11. 17. 03:56

styled-components + typescript

이미 문서가 잘 작성되어 있으니 참고합시다. styled-components.com/docs/api#typescript styled-components: API Reference API Reference of styled-components styled-components.com 설치 yarn add @types/styled-components styled-components props를 사용할 경우의 타이핑 다음과 같이 styled에도 제네릭을 사용하여 props를 타이핑해줘야 합니다. 물론 interface를 사용해서 다음과 같이 생략할 수도 있겠지만 생각보다 interface가 많아지면 이를 관리하기가 너무 힘들어집니다. styled-components를 사용할 때는 그냥 인라인 스타일로 제네릭을 ..
React, Next, Redux/⚛ React.TS 2020. 8. 26. 05:45

React에서 Typescript 사용하기

시작 npx create-react-app [원하는 이름] --template typescript 직접 tsconfig.json 등을 만들어 가며 바닥부터 만들 수도 있지만 빠른 시작을 위해 위와 같은 툴체인을 사용하자. --typescript 옵션을 주고 create-react-app을 하면 js와 jsx가 아니라 ts와 tsx가 생성된다. 뿐만 아니라 package.json에도 새로운 게 추가되었고 tsconfig.json이라는 파일도 생성 되었다. tsconfig.json의 설정을 통해 특정 규칙을 끄고 켤 수도 있고 얼마나 strict할 지 결정할 수도 있기 때문에 TS를 잘 쓰려면 tsconfig.json을 잘 다룰줄 알아야 한다. tsconfig.json에 대한 설명은 아래에 정리해두었습니다...
React, Next, Redux/⚛ React.TS 2020. 3. 18. 02:48