React-icons https://www.npmjs.com/package/react-icons react-icons SVG React icons of popular icon packs using ES6 imports. Latest version: 5.0.1, last published: 12 days ago. Start using react-icons in your project by running `npm i react-icons`. There are 5607 other projects in the npm registry using react-icons. www.npmjs.com React 작업중 쉽게 아이콘을 추가할 수 있는 라이브러리 이다. 위에 첨부된 사이트에서 보이듯 npm i react-ic..

React의 데이트 흐름 React는 기본적으로 데이터 즉. props를 단방향으로 전달한다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. 이는 React의 핵심 개념중 하나인 "단방향 데이터 흐름"을 나타낸다. 부모 컴포넌트에서 자식컴포넌트로 props를 내릴 수 있지만, 자식 컴포넌트에서 직접적으로 부모 컴포넌트의 상태를 변경할 수 없다. 자식 컴포넌트에서 상위 컴포넌트로 데이터를 다시 전달하려면 콜백 함수 또는 이벤트를 사용하여 부모 컴포넌트에서 처리해야 한다. React는 단방향 데이터 바인딩이 되는 이유 결론은 애플리케이션의 상태를 예측 가능하고 디버깅하기 쉽게 만들기 위함이다. 예측 가능한 데이터 흐름: 단방향 데이터 흐름은 데이터의 흐름이 항상 한 방향으로만 이동하도록 한..

React 라이프 사이클 리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다. 리액트 v16.3 이전에는 클래스 컴포넌트의 라이프사이클이 메서드로 주로 다뤄졌지만, v16.3 이후부터는 함수 컴포넌트에서도 라이프사이클에 대한 기능이 Hooks를 통해 도입되었다. 함수 컴포넌트 함수형 컴포넌트는 리액트의 함수 컴포넌트 기능과 Hooks를 활용하여 UI를 구성하는 방식이다. 함수컴포넌트 예시코드 import React, { useState } from 'react'; function FunctionalComponent() { const [count, setCount] = useState(0); return ( Cou..

💬 들어가며 공모전 개발을 진행하며 위도, 경도 값을 이용하는 부분이 있어 Geolocation을 통해 위도 경도 값을 받아와 사용중이었다. 이번엔 현재위치를 띄워야 하는 상황이 생겨 받아왔던 위도, 경도 값을 이용해 상세 주소를 받아오는 방법을 공유해본다. ❓ 문제 상황 Cannot find Authorization : KakaoAK header kakao API 를 이용해 다양한 기능들을 구현하는 방식은 다른 블로그들, 공식 문서 등에 자세히 나와있다. 따라하던 와중 계속해서 위와같은 오류가 발생했다. 초기에는 401 오류자체가 권한 문제라는 생각에 내 Key값, IP, 호스트 주소설정등이 문제인줄 알고 뻘짓을 하다가. 다른분이 작성하신 질문 글을 보고 형식이 잘못된 것을 알았다. 💡 문제 해결 co..

💬 들어가며 프로젝트를 진행하며 뒤로가기 기능을 만들다가 눈치챈 부분 useHistory가 사라진 점. 그것을 대체하는 방법을 갖고왔다. 💡 문제 해결 간단 그 자체이다. 기존에 사용하였던 react-router-dom 의 useHistory가 아닌 window의 history를 사용하면 된다. const handleGoBack = () => { window.history.back(); }; 이렇게 사용하면 window에 내장되어있는 history를 이용하여 바로 전의 페이지로 이동할 수 있다. 버튼내부 내용 이런식으로 버튼에 onClick을 걸고 함수를 실행시키면 뒤로가기가 정상적으로 작동하는 모습을 볼 수 있다.

💬 들어가며 이제는 공부하고 정리했던 자료를 확인할 때, 노션, 한글파일보다 블로그에 먼저 들어온다. 오랜만에 환경구성부터 해볼려고하니 헷갈리는게 생각보다 있어 조금씩 정리해보려 한다!! CRA 설치 CRA는 설치하고 사용하기 굉장히 편리하다. npx create-react-app 프로젝트이름 을 적으면 현재 폴더 아래에 프로젝트 CRA 프로젝트 파일이 생긴다. 그럼 이런식의 폴더와 파일들이 구성된 것을 확인 할 수 있다. 오늘은 많은 작업을 하지 않고 필요한 화면만 구성할 것이다. 이전에 해봤던 것 처럼 react-router를 이용하여 page들을 관리할 생각이다. src 파일 정리 그러기 위해선 먼저 필요없는 파일들을 지워볼 예정이다. App.css , App.js, index.css, index...

useCallback과 useMemo의 차이점 결론 부터 말하자면 useCallback과 useMemo는 모두 컴포넌트를 최적화하기 위해 사용하는 Hook 이다. 차이점은 useCallback은 함수를 캐싱하고, useMemo는 결과값을 캐싱한다. useCallback useCallback은 함수를 기억하는 Hook으로 2개의 인자를 받는다. 첫번째 인자는 새로만들 함수의 내용이 들어오고, 두번째 인자는 함수가 의존하는 값이 들어있는 배열이 들어온다. 두번째 인자가 변경되지 않으면 기존의 함수를 재사용하게 된다. 예를 들어 다음과 같은 코드가 있다. function Example({ onClick }) { const handleClick = () => { console.log('button clicked..

❓ 문제 상황 react 프로젝트 진행중 게시판의 게시글이 많아질수록 스크롤이 많아지고 가독성이 떨어지는 문제점을 해결하기 위해 pagination을 사용하기로 했다. 💡 문제 해결 현재 우리 프로젝트의 코드는 게시글들을 firebase에서 받아온 데이터들을 props로 받아 map을 이용해 넘겨주는 함수와 그것들을 인자로 받아 랜더링 시켜주는 함수가 있다. 여기서 처음 contents를 props로 받고, map을 이용해 다른 함수로 넘겨주기 전에 pagination을 이용해야 한다. 이해를 돕기위해 코드를 추가하면 function BoardItem({ title, content, id, like }) { return ( {title} {content} {like} ); } 해당 코드로 넘겨주기 전에 ..

💬 들어가며 이전에 개념을 정리했던 Redux, MVC등의 글을 한번 보고가면 좋을 듯 하다. https://strap.tistory.com/58 (MVC, Flux, Redux) 애플리케이션 상태관리 MVC (Model - View - Controller) 소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성 strap.tistory.com 오늘 공부할 부분은 recoil 이지만 한번더 간단하게 Redux에 대해 이야기해보면, Redux는 전역 상태관리를 도와주는 라이브러리로 오늘날 Recoil에 비해 월등히 많은 개발자가 사용한다. 최근 Recoil도 많은 개발자가 사용하는 추세이지만 아직 비교가 안..

💬 들어가며 firebase를 사용하여 프로젝트를 진행중에 게시글을 실시간으로 불러와야하는 문제점이 생겼다. 이럴땐 onSnapshot을 사용하여 실시간으로 DB정보를 가져올 수 있다. 이 onSanpshot은 firestore를 이용하는데 .. FireStore란? Firestore는 구글(firebase)에서 지원하는 NoSQL 데이터베이스 서비스로, 실시간 리스너를 통해 사용자와 기기간 데이터의 실시간 동기화가 가능하다. 또한, Cloud Firestore는 앱에서 많이 사용되는 데이터를 캐시하기 때문에 기기가 오프라인 상태가 되더라도 앱에서 데이터를 쓰고 읽고 수신 대기하고 쿼리할 수 있다. firebase를 이용해본 사람이면 누구나 아는 부분일 것이다. 여기에서 firestore Database..