민프

위 코드에서 Link에 user.id 값을 파라미터로 보내주고 있다. 여기에서 useParams를 이용하면 이 파라미터값을 가지고올 수 있다. 방법은 Router에서 path에 "/: 파라미터 이름" 으로 붙여주면 된다. 이제 본격적으로 useParams를 적용해보자 이렇게 useParams를 이용해서 파라미터 값을 가져와서 user JSON 배열에 user id에 해당하는 name값을 가지고 올 수 있다. 예시로 이렇게 들었지만 파라미터 값을 가지고와서 필요한 로직을 구현하면 될 것 같다.

useNavigate는 v5에서는 없고, location.push로 이용할 수 있다. 나는 이전에 Link를 이용하여 페이지를 이동시켰는데 이번에는 useNavigate를 이용하여 이동시켜볼 것 이다. 두개의 차이점은 useNavigate은 지정한 페이지로 바로 이동시킬 수 있는 것 이다. Link도 마찬가지로 지정한 페이지로 갈 수 있는데 useNavigate는 언제 써야하는 것 일까? 예를 들어서) 만약 로직에 의하여 유저를 로그인 시키거나 홈페이지로 이동시키고 싶을때 사용하면 유용하다. 코드는 아래와 같다.

errorElement는 v5에서는 없는 기능이다. errorElement는 내가 정의한 URL에 접근하지 않고, 다른 URL을 사용하였을때 오류에 대한 대응을 해줄 수 있도록 해준다. 이렇게 두개의 에러 컴포넌트를 만들고 각 path에 따른 erroeElement로 넣어주면 오류가 생겼을때 빈화면만 보이거나 런타임에서 바로 충돌이 일어나서 모든게 사라질 것이다. 이렇게 각 컴포넌트에서 문제가 생겼을경우 대응을 해줄 수 있다.

ㅇ. React-router-dom v6.4 (BrowserRouter 이용) ㅇ. React-router-dom v6.4 (createBrowserRouter 이용, App.tsx -> Root.tsx로 변경) createBrowserRouter을 이용하게 되면 1. 만약 내가 /about으로 가고자 하면 router의 path url로 매치가 되고 2. react Router는 Root를 Render하게 된다. 3. React에서는 자식에 해당되는 URL의 element를 react-router-dom에 알리기 위하여 Root.tsx에서와 같이 Outlet 컴포넌트를 사용하여 페이지를 띄워준다. (Outlet을 사용하지 않으면 부모의 페이지인 Root만 띄워주게 된다. ) 결과화면 다음과 같다. Br..

이번 포스팅에서는 공식문서를 참고하여 typeScript에서 styled Component를 이용해서 theme을 적용해보는 부분을 해보려고 한다. https://styled-components.com/docs/api#typescript styled-components: API Reference API Reference of styled-components styled-components.com 1. npm 설치해주기 # Web npm install --save-dev @types/styled-components # React Native npm install --save-dev @types/styled-components @types/styled-components-react-native 2. src에..

이번 포스팅에서는 react와 typescript를 이용해서 form을 구현해볼 것 이다. input onChange에서 event를 보면 타입이 any라고 나오는데 typeScript를 사용하는 우리는 이제 이 부분에 대해서도 타입을 지정해줄 것 이다. 그러면 도대체 어떤 타입을 가져아 하는 것 일까? https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/ Forms and Events | React TypeScript Cheatsheets If performance is not an issue (and it usually isn't!), inlining handlers is easiest a..

이번 포스팅에서는 TypeScript를 이용해서 Component의 State를 바꾸는 것을 알아볼 것 이다. useState HOOK은 React에서 쓰는 방법과 동일하다 function Circle({ bgColor,borderColor }: CircleProps) { const [counter, setCounter] = useState(1); return } 근데 여기서 state의 defalut 값을 '숫자 1' 로 주면 아래 사진과 같이 typeScript는 앞으로 counter이라는 state는 int로만 접근을 해야한다 라고 인식을 한다. 예를 들어서) defalut를 bool 값을 넣으면 boolean으로 인식하고 string값을 넣으면 string으로 인식하는 것 이다.

저번 포스팅에서는 https://minf.tistory.com/135 [React][TypeScript] type Props 적용해보기 (with interface, required props) --------------------App.tsx-------------------- import Circle from "./Circle"; function App() { return ( ); } export default App; --------------------App.tsx-------------------- --------------------index.tsx-------------------- import React from "react"; i minf.tistory.com required Props를..

--------------------App.tsx-------------------- import Circle from "./Circle"; function App() { return ( ); } export default App; --------------------App.tsx-------------------- --------------------index.tsx-------------------- import React from "react"; import ReactDOM from "react-dom"; import { ThemeProvider } from "styled-components"; import App from "./App"; ReactDOM.render( , document.getEl..

1. npx create-react-app 내 앱 이름 --template typescript 2. npm i --save-dev @types/styled-components 3. npm i styled-components 4. App.js, index.js 내용 수정 ----------index.js---------- import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render( , document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function // ..