React

위 코드를 출력해보면자식컴포넌트 라는 텍스트가 출력이 안되는것을 볼 수 있다.Parent밑에 child가 나오게 하려면children로 자식컴포넌트가 위치할곳을 지정해줘야한다.위 코드처럼 하면 잘 나오는것을 확인할 수 있다.기존 프로젝트를 진행할때 children을 사

<React.StrictMode> --> 해당 코드가 <app/> 을 감싸고 있으면개발모드에서 (개발 단계시 오류를 잘 잡기위해) 두번씩 렌더링됩니다.

위 코드는 자체적으로 실행시켜준다.기존 Create React App 프로젝트에 TypeScript를 추가하려면 먼저다음으로 파일 이름을 TypeScript 파일로 바꾸고(예 src/index.js: src/index.tsx) 개발 서버를 다시 시작합니다 !

<Outlet/>은 중첩 Route를 사용해야할때 자식 Route element의 위치를 나타낼때 사용된다.중첩 라우팅을 하려고하는데 Header가 기본에 자식으로 main,issuelist를 가진다.이때부모 Route에 그냥 헤더코드만 작성하게되면 자식 elem

개발을 하다보면 아래 경고를 자주 마주하게 된다.Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.key는 반드시 유니크해야한다.(꼭 1,2,

/detail/1 경로로 들어가게되면Detail 컴포넌트가 실행되는데,해당 Detail 컴포넌트에서는 useParam Hook으로 id 에 대한 값을 가져올수 있다.로그를 찍어보면id에 매칭되어 파라미터값이 들어오는것을 확인할 수 있다.useParams 타입으로 S

아래 블로그에서 React + Vite 에서 ReactComponent 사용에 대해서 말하고 있어서위 패키지가 설치가 안된분이라면 아래 블로그를 방문하고 오면 좋다.https://velog.io/@yoonth95/SVG-파일-React-Component로-가져

react, vite 환경의 프로젝트를 배포했을때 사진이 깨지거나 안나오는 경우가 있었다.기존 코드해결 코드위처럼 “” 을 안붙여주면 배포했을때 에러난다.따옴표를 쓰면 안되니까 주의할것!https://ko.vitejs.dev/guide/assets.html#i