728x90 react9 [Error Handling] TS2307: Cannot find module '.png' or its corresponding type declarations. (이미지 import 에러) [Typescript] TS2307: Cannot find module '.png' or its corresponding type declarations. React와 TypeScript를 사용하여 과제를 하던 중에 .png 확장자명을 가진 image파일을 import하려는데 자꾸 위와 같은 에러가 나면서 import가 되지 않았습니다. 검색해서 찾아보니 타입이 정의되어 있지 않아서라고 했습니다. // tsconfig.json ... "typeRoots": ["src/types"], ... tsconfig.json 파일에 위와 같이 추가해주고 // src/types/images.d.ts declare module '*.png'; declare module '*.jpg'; declare module '*... 2022. 6. 6. (1-8) React 기초 - State State state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이라고 하였다. 실제 애플리케이션에서는 무엇이 "상태"라고 할 수 있을까? 쇼핑몰 장바구니를 예로 들어보겠다. 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓는다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태이다. [그림] 장바구니 내에서의 상태 체크박스를 코드로 구현해 보면 아래와 같다. 아래 예시에서는 단순히 체크된 상태에 따라 보이는 글씨가 달라지지만 이를 쇼핑몰에 적용하면 체크 여부에 따라 구매할 물건의 개수나 구매 금액이 변경되고 이에 따라 사용자의 화면 또한 달라진다. 이처럼 컴포넌트 내에서 변할 수 있는 값, 즉.. 2021. 8. 15. (1-7) React 기초 - props props의 특징 컴포넌트의 속성(property)을 의미한다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. props는 읽기 전용이다. props는 성별이나 .. 2021. 8. 14. (1-6) React 기초 - React Router SPA & Routing SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다. 예를 들어 Twittler 와 같은 SPA 를 만들 때 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다. 또한 이 화면에 따라 "주소"도 달라질 것이다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing) 이라고 한다. 하지만 React 자체에는 이 기능이 내장되어 있지 않다. 우리가 직접 주소마다 다른 뷰를 보여줘야 한다. React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용한다. React Router 활용 React Router의 주요 컴포넌트에 대해 알아보.. 2021. 8. 14. 이전 1 2 3 다음
