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..