코딩/React
-
[React] Array state 관리하기코딩/React 2022. 3. 22. 08:56
React에서 Array를 사용하기 위해서는 let이나 const로 바로 사용하지 않고 useState로 사용합니다. const [array, setArray] = useState([]); 이 때, array에 push하는 방법은 ...을 사용하는 것입니다. setArray([ ...array, newElement]); 다만, for문에 넣어 array를 변경하는 등의 상황에서는 잘 작동하지 않을 때가 있는데요, 그럴 때 wrapped function을 사용합니다. (권장된 방식) setArray((array) => [...array, newElement]);
-
[React] Axios 사용법코딩/React 2021. 12. 23. 16:20
Axios는 javascript에서 Rest API와 쉽게 통신할 수 있도록 해주는 라이브러리입니다. fetch API와 같은 역할을 하나 json 형식으로 통신을 할 때 더 편리합니다. 일반 자바스크립트에서도 axios 라이브러리를 불러와사용할 수 있고, react에서는 npm 패키지를 이용할 수 있습니다. npm install --save axios 위 코드로 패키지를 설치해주세요. 기본적인 사용법은 아래와 같습니다. import axios from "axios"; async function getApi() { const response = await axios.get("url"); return response; } async function postApi() { const response = awa..
-
[React] Typescript 사용시 children prop 관련 에러코딩/React 2021. 12. 22. 12:40
Binding element 'children' implicitly has an 'any' type. React로 크롬 시작페이지를 만들다가 위와 같은에러가 떠 당황했습니다. 컴포넌트를 만들다보면 children prop을 불러오는 일은 비일비재한데 이 에러가 해결이 되지 않으면 꽤나 골머리가 아플 것 같았기 때문입니다. 구글링을 조금만 해보니 저와 같은 에러가 뜬 사람들이 꽤 많은 것 같습니다 ㅎㅎ. https://stackoverflow.com/questions/55370851/how-to-fix-binding-element-children-implicitly-has-an-any-type-ts7031 How to fix Binding element 'children' implicitly has an ..
-
[React] typescript 사용시 styled-components 에러코딩/React 2021. 12. 21. 13:50
typescript에 익숙해지기 위해 타입스크립트를 활용한 리액트앱을 만들어보고자 했는데.. Could not find a declaration file for module 'styled-components'. 이런 에러를 마주하게 됐습니다.. 역시 첫 시작은 어렵네요. 근데 에러창을 찬찬히 살펴보니 아래와 같은 해결책을 줬습니다. npm i --save-dev @types/styled-components 당장 해결이 적용되는 건 아닌 것 같으니 리액트서버를 껏다가 켜주시면 될 것 같습니다! ㅎㅎ