React는 선언형 코드를 지향한다. React는 선언형 프로그래밍 패러다임에 기반을 두고 있으며, UI를 선언적인 방식으로 정의한다. React 컴포넌트는 상태와 프로퍼티를 입력값으로 받아들이고, 이를 기반으로 UI를 렌더링한다. 상태나 프로퍼티 값이 변경될 때마다 React는 자동으로 UI를 다시 렌더링하여 새로운 값으로 업데이트한다. 다음 잘못된 코드의 예시를 보며, 이해해보자. import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { const button = document.querySelector('#increment')..

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type. Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type. Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `boolean` type. 위의 에러 구문이 발생하는 원인은 리액트의 이벤트 핸들러(event handler)는 반드시 '함수' 형태로 받아야 하는데, '함수가 아닌 다른 형식'으로 받았기 때문입니다...

리액트 훅스 버전으로 구글 맵을 띄워보는 작업을 해보겠습니다! 1. Google Maps API 발급하기 구글 맵스 플랫폼 사이트에 접속합니다 cloud.google.com/maps-platform/?hl=ko Geolocation API | Google Maps Platform | Google Cloud Google Maps Platform을 선택하면 정확한 실시간 데이터 및 동적 이미지로 몰입형 위치정보 활용 환경을 만들고 더 나은 비즈니스 의사결정을 내릴 수 있습니다. cloud.google.com "시작하기" 버튼을 클릭합니다 다음 결제 항목에서 안내하는 대로 입력합니다. 자동 결제와 같이 추후에 돈이 빠지는 일은 없으니 걱정하지 마시고 진행하시면 됩니다 "사용자 인증 정보" 항목을 클릭하면 발급..

공식 문서에는 순수 JavaScript를 이용한 API 적용 방식만 기재되어 있기에, React Hooks 환경으로 코드를 변형하기 힘들어 하시고 있는 분들에게 도움이 되었으면 좋겠습니다❗️ 1. Kakao 지도 Javscript API 키 발급 받기 developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 위 주소로 접속, 로그인 후 내 애플리케이션을 클릭합니다. 그러면 위의 첨부사진에 있는 "애플리케이션 추가하기"를 선택 앱 이름과 사명자명을 기재해야하는데, 추후 수정도 되는 부분이니 적당하게 기입해주세요. "앱..