728x90 728x90 분류 전체보기153 React 동적 라우팅과 중첩 라우팅 React 동적 라우팅과 중첩 라우팅 링크를 통해서 상세페이지로 이동한다면 각 페이지마다 다른 데이터를 보여줘야 할 것이다. Route를 통해서 경로를 새로 지정 해주어도 되지만 모든 상세 페이지마다 만들 수는 없다. 여기서 또 다른 라우트를 사용하는데 동적 라우트이다. 경로를 이렇게 /product-detail을 정의하는 대신 :를 사용하고 원하는 식별자를 입력한다. /product detail/:productId 처럼 정의할 수 있다. 이 동적 경로 기능을 활용하려면 URL에 입력된 구체적인 값에 액세스해야 한다. 그러기 위해서 react-router-dom에서 useParams를 import 한다. UseParams를 호출하면 params 객체를 반환하고 key-value 쌍으로 param을 얻을 .. 2023. 2. 19. react-router Link와 NavLink 사용 방법 react-router Link와 NavLink 사용 방법 link 라우팅을 사용하면서 URL을 수동으로 변경하는 방법으로만 해당 페이지를 탐색하지는 않는다. 우리가 클릭할 수 있는 링크를 페이지에 넣고 이동하는 것이 일반적이다. 일반적으로 링크를 사용할 때 아래와 같이 a태그를 이용한다. const MainHeader = () => { return ( About Products ); }; export default MainHeader; 실제로 두 페이지 사이를 탐색하지만 이는 새 페이지를 로드한다. 링크 중 하나를 클릭할 때마다 여기에 이 HTML 파일이 새로 로드되며 이 애플리케이션에서 가질 수 있는 애플리케이션 상태를 잃게 되는 것이다. 이는 SPA를 구축한다는 개념에 반대되는 내용이고 최적의 사용.. 2023. 2. 18. React 라우팅 개념과 사용 방법 라우팅이란? 라우팅이란 URL의 여러 경로로 서로 다른 페이지를 로드할 수 있는 기능이다. 웹사이트는 하나의 특정 기능에 대해서 다른 경로를 가지는 다른 페이지를 로드하므로 URL이 변경되면 페이지에 보이는 콘텐츠가 변경된다. 이처럼 호출하려면 다른 페이지가 있으며 각 페이지에는 자체 URL 또는 도메인 뒤에 고유한 경로가 있어야 하고 경로가 변경되면 페이지의 콘텐츠도 변경되어야한다. 리액트로 작업하지 않을 때는 HTML 파일을 다시 보내는 서버가 있고 서버에 다른 HTML 파일을 저장하거나 해당 파일을 서버에서 동적으로 생성하여 콘텐츠를 보여준다. 이 방식은 URL에 대한 요청이 오면 다른 HTML 페이지가 클라이언트로 다시 전송되고 이 페이지는 브라우저에서 렌더링 된다. 즉, URL을 변경할 때마다 .. 2023. 2. 17. Redux 사용 시 주의사항 Redux 사용 시 주의사항 state 업데이트 Redux가 기존의 state를 새로운 state로 대체하기 위해서 새로운 객체인 새 snapshot을 항상 반환해야 한다. 이전 state를 덮어쓰기 때문에 state를 업데이트할 때는 업데이트 하려는 state 외에 다른 state를 설정해야한다. 여기서 왜 state에 직접 접근하여 업데이트하지않고 새로운 상태로 반환해야하는지 의문이 생길 수 있다. 만약 아래와 같이 코드를 작성한다면 작동이 될 것이다. 하지만 이것이 작동되는 것처럼 보이지만 잘못된 것이며 절대 기존의 state를 변형해서는 안된다. 항상 새로운 state 객체를 반환하여 재정의한다. if (action.type === 'increment') { state.counter++; retu.. 2023. 2. 15. 이전 1 ··· 27 28 29 30 31 32 33 ··· 39 다음 728x90 728x90
