지미뉴트론 개발일기

리액트에서 페이지 이동을 구현하는 과정에서 useNavigate는 매우 유용하게 사용됩니다. 상세한 이해를 위하여 해당 훅의 사용 방법에 대하여 간략하게 요약해보도록 하겠습니다. 1. 설치 및 임포트 방법 useNavigate는 react-router-dom 라이브러리에 포함된 훅으로, 해당 라이브러리가 설치되지 않은 경우, 먼저 설치를 진행해주셔야 합니다. // npm을 사용하는 경우 npm install react-router-dom // yarn을 사용하는 경우 yarn add react-router-dom 임포트 및 훅 사용을 위하여 객체를 선언하는 코드 예시는 다음과 같습니다. import { useNavigate } from 'react-router-dom'; const navigate = u..

리액트의 대표 필수 개념이지만 혼동되기 쉬운 props와 state의 차이를 간단한 예제를 기준으로 이해해보도록 하겠습니다. Props props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용되며, 읽기 전용으로 자식 컴포넌트에서는 수정이 불가능합니다. 코드에서 사용되는 방식의 예시 코드 스니펫은 다음과 같습니다. function Welcome(props) { return Hello, {props.name}; } function App() { return ; } App 컴포넌트는 Welcome 컴포넌트에 name이라는 prop을 전달할 것입니다. Welcome 컴포넌트는 이 prop을 사용하여 동적으로 데이터를 렌더링하게 됩니다. 최종 출력 결과는 Hello, Jimmy 텍스트가 h1 태..