오식랜드

router 란?주소에 따른 컴포넌트 렌더링을 관리하기 위한 라이브러리이다. 쉽게 말하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라 할 수 있다.셋팅보통은 ‘react-router-dom’을 사용하는 듯 한데, 지금 내 프로젝트는 vite + react라서 vite의 라우터 플러그인인 ‘ vite-plugin-next-react-router’를 사용하고자 한다공식 문서 : https://www.npmjs.com/package/vite-plugin-next-react-router설치npm install vite-plugin-next-react-router 설정 :  vite.config.ts처음에는 reactRouterPlugin() 하나로 끝내고 싶었지만 에러가 발생해서..

Component란?컴포넌트란, 재사용이 가능한 각각의 독립된 모듈이다. (재사용 가능한 UI 조각) 예를 들면 모든 페이지에 중복되는 상단 메뉴나 푸터, 동일한 디자인의 입력칸이나 버튼 등이 있다.하나의 컴포넌트를 만들어놓으면 같은 코드를 중복해서 여러번 작성할 필요가 없다. 또한 동일한 컴포넌트를 사용하여 일관적인 UI를 제공할 수 있다.동일한 컴포넌트를 어떻게 활용하느냐? props 값을 이용해 제어하면 된다 ~ 만들어보기구조1. 선언 : 화살표 함수를 변수 혹은 상수에 담아 선언한다.const ComponentName = () => {}; 2. 반환 : return값 안에 마크업을 작성한다. 이때 최상단은 태그 하나로 감싸져야한다.// 옳은 예const ComponentName = () => { ..

props란?props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말한다.이 데이터는 자식 컴포넌트에서 변경할 수 없다. (읽기 전용)state란?컴포넌트 내부에서 관리되는 데이터로, 변경이 가능하다 사용법JSParent.js 부모 → 자식 : props 전달import Child from './Child'; const Parent = () => { return ; };Child.js 자식 : 전달받은 props 사용함수형 컴포넌트const MyComponent = (props) => { return {props.message};};구조 분해 할당const MyComponent = ({ message }) => { return {message};};기본값 설정하기const MyCompone..