React3 화면을 이동할 때 Link, useNavigate 무엇을 사용해야 할까? 안녕하세요. 오늘 저는 프로젝트를 하다가 Link와 useNavigate 중 어느 것을 사용할지, 어떤 차이가 있는지 궁금해서 정리해 본 내용을 공유합니다. React에서는 페이지를 이동하기 위해 Link, useNavigate 둘 중 하나를 사용할 수 있습니다. Link 태그는 Route에서 path를 지정한 후 to 속성에 해당 path를 설정하기만 해주면 됩니다. 그렇게 하면 그냥 클릭하면 해당 페이지로 이동할 수 있게 해주죠. 회원가입 그리고 useNavigate는 마찬가지로 이 훅을 사용하면 다른 페이지로 이동시켜줍니다. 그렇다면 useNavigate는 Link와 무엇이 다를까요? Link는 클릭만 하면 이동한다는 특징이 있습니다. 그에 반해 useNavigate는 페이지 이동 시 추가 로직이 .. 2024. 3. 19. a태그와 Link태그의 차이점 a태그를 통해 이동하는 것은 서버에 새로운 요청을 전송한다. (새로운 http 요청을 서버에 전송) ⇒ SPA의 장점이 사라짐. 모든 코드를 다시 로드한다. 그래서 성능에 안좋은 영향을 끼침. Link 사용 장점 : 요청을 전송하는 기본 설정을 막고, 리액트 라우터가 새 URL을 알고, 그 URL에 맞는 적절한 요소를 로딩하도록 해줌. 사용법 import import { Link } from "react-router-dom"; 기존 a태그 import { Link } from "react-router-dom"; function HomePage() { return ( My Home Page Go to the list of products ); }; export default HomePage; Router의.. 2024. 2. 22. State lifting은 어떻게, 왜 쓸까? State lifting 종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다. - React 공식 문서 방법 자식 컴포넌트에서 특정 작업을 수행하면 콜백함수를 수행한다. 그 콜백함수 안에는 부모 컴포넌트에서 prop으로 전달한 함수를 실행시킨다. // GameBoard.jsx 자식 컴포넌트 const handleSelectSquare = (rowIndex, colIndex) => { setGameBoard((prevGameBoard) => { const updatedBoard = [...prevGameBoard.map(innerArray => [...innerArray])] updatedBoard[rowI.. 2024. 2. 8. 이전 1 다음
