봉보로봉봉

useLocation() 사용자가 현재 머물러 있는 페이지에 대한 정보를 받아온다. http://localhost:3000/home?keyword=react location에서 pathname을 사용하면 쿼리를 제외한 /home을 가져오고 search를 하면 ?keyword=react 쿼리스트링을 가져온다. useLocation을 선언하고 location.pathname이나 location.search로 접근할 수 있다. import React from 'react'; import { useLocation } from 'react-router-dom'; const App = () => { const location = useLocation(); console.log(location.pathname) //..

Controlled Component, Uncontrolled Component(제어 컴포넌트와 비제어 컴포넌트) 비제어 컴포넌트는 기존의 바닐라 자바스크립트 방식과 비슷하다. useState를 사용하지 않고 ref를 사용해서 값을 받아온다. 비제어 컴포넌트는 값을 실시간으로 동기화하지 않는다. 반면에 제어 컴포넌트는 항상 최신값을 유지한다. 제어 컴포넌트를 사용하는게 조금 더 리액트스럽다고 한다. input의 경우 value와 이벤트 함수로 컴포넌트를 제어하는 하면 제어 컴포넌트이고, ref를 사용해서 ref의 current.value를 가져오면 비제어 컴포넌트인 것 같다. 제어 컴포넌트를 좀 더 추천하는 것 같아서 이제는 되도록 제어 컴포넌트를 사용해야겠다. 참고 useRef useRef는 .curr..

propTypes propTypes으로 props로 들어올 데이터타입을 검사할 수 있다. isRequierd로 필수 항목도 지정해줄 수 있다. 문자와 숫자 말고도 다양한 타입을 검사할 수 있다. import PropTypes from 'prop-types'; MyComponent.propTypes = { name: PropTypes.string.isRequired, // 필수 항목 picture: PropTypes.string, // 필수 항목 아님 score: PropTypes.number.isRequired, }; 참고 커스텀 컴포넌트에는 addEventListener를 달 수 없다. length 0 arr.length = 0 이면 리액트는 0을 출력하기 때문에 배열의 길이가 0일때는 출력하지 않을거..

저번에 설치하려고 했는데 안돼서 넘어갔는데 이 방법대로 하니 잘 됨! npx create-react-app my-app https://velog.io/@ash3767/React-%EC%97%90%EB%9F%AC React 에러 npx create-react-app 이러한 에러가 발생한다면 , >npm uninstall -g create-react-app npm add create-react-app 다시 npx create-react-app [app-name] velog.io

Absolutely Awesome React Components & Libraries

보호되어 있는 글입니다.

firebase Authentication 이용해서 로그인 기능 구현하다가 안되고 자꾸 에러남 The error you provided does not contain a stack trace. 당신이 stack trace 없이 제공해줘서 나는 에러임 API key 감추려고 .env에 넣어서 했는데 그렇게 하면 오류나고 키 그대로 넣으면 오류 안남 .env파일이 문제구나하고 보니까 파일을 최상위 경로에 둬야되는데 있던 위치에 생성해서 놔뒀음 .env파일 최상위 경로로 이동하고 해결 invalid api key error in console Your API key is invalid, please check you have copied it correctly. 니 API key가 잘못됐으니까 맞게 복사했는지..

보호되어 있는 글입니다.