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), 뷰(Vue), 앵귤러(Angular)는 각각 JavaScript 기반의 프론트엔드 프레임워크 또는 라이브러리로, 모두 웹 애플리케이션을 개발하기 위한 도구로 사용돤다. 하지만 각각은 고유한 특징과 철학을 가지고 있다. 러닝 커브 (Learning Curve) : 학습곡선 리액트: 자유도가 높아 초기 학습 곡선이 다소 높을 수 있다. (시간과 노력이 필요하다.) 뷰: 진입 장벽이 낮아 빠르게 학습할 수 있다. 앵귤러: 기능이 많고 복잡한 특성 때문에 학습 곡선이 다소 가파르다. (기울기가 크다는 의미로 학습 초기에 어려움이 있다.) 문법 및 구조 리액트: JSX(JavaScript XML)라는 문법을 사용하여 컴포넌트를 정의하며, 가상 DOM(Virtual DOM)을 활용하여 성능을 ..

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

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

간단하다! 컴포넌트를 리랜더링 시키고 싶으면 useEffect를 사용하면 된다. 처음 코드를 작성했을 시 전반적인 Link 연결상태가 좋지않아 제대로 확인하지 못했던 문제점을 수정했다. const url = window.location.href; const lastIndex = url.lastIndexOf("/"); const urlNumber = url.substring(lastIndex + 1); 위 코드는 현재 url의 게시글 index번호를 불러오는 코드이다. (서버와 연결하지 않은상태라 임의의 데이터로 작업중) 게시글 목록중 하나의 게시글을 선택했을때, 그에맞는 상세 내용이 떠야하는데. 처음랜더링 된 게시글이 계속해서 뜨는 오류가 발생하고 있었다. 따라서 컴포넌트가 호출될때마다 리랜더링해주며 그..

Hook Hook 이란 함수 컴포넌트에서 상태관리 및 라이프사이클과 관련된 작업을 사용할 수 있도록 하는 리액트의 API이다. 이전에는 클래스 컴포넌트에서만 React의 라이플 사이클을 관리하고 사용할 수 있었는데 Hook의 등장으로 함수 컴포넌트 에서도 같인 기능의 작업을 수행할 수 있게 되었다. React에서 제공하는 Hook중 useState, useEffect, useContext 등을 알아보자. useState 상태를 관리하기 위해 사용되는 것으로 초기값을 인자로 받으며, 배열 형태로 현재 상태값과 해당 상태값을 업데이트 하는 함수를 반환한다. 예제 export default function Home() { //useState를 이용하여 초기 값을 설정함 const [count, setCount..