react1 (6) 썸네일형 리스트형 switch 여러라우터중 하나만 매칭 젤 첫번째거 매칭 /를 맨 마지막에 두면 exat안해도 됨 하지만 이런 용도로 사용하는거 아니다. 페이지를 못 찾았을때 notfound페이지를 보여줄때 유용 Link랑 비슷한 컴포넌트인데, 해당 Link의 주소가 현재 브라우저에서 가르치고 있는 주소랑 일치하면 스타일지정 /면 exact넣어 줘야함 라우터 부가기능 history, withRouter history 객체 라우터를 사용하는 컴포넌트에게 props로 전달 컴포넌트에서 라우터에 직접적인 접근가능(뒤로가기나 이런 것들이 결국 라우터를 이용하는거니까) 특정함수를 호출했을때(goBack이런거) 특정경로로 이동하거나 뒤로가거나 페이지 이탈방지 goback()뒤로가는거 push()특정경로로 이동 history객체안에는 여러가지 기능들이 있다. goback()이나 puhs()도 그 기능 뭘 작성하고 실수로 이탈방지 block() 여기서는 /history라우터를 만들었지만 /나 /about 에서도 위에처럼 histroy객체를 그냥 호출할수 있는거 같다. match나 location처럼 바로 위에처럼 App.js에서 Route를 설정해줬자나, 근데 WidthRouterSample.js는 App.js에 R.. 서브라우터 라우터 안에 라우터 넣기 탭에 활용 파라미터과 쿼리 주소를 통해서 어떤 동적인 값을 읽어 와야 할떄 파라미터는 특저데이터를 조회할떄 쿼리는 다양한 옵션을 통해 조회할때, 검색할때 많이 사용 북이라는 타입을 가진 데이터들을 날짜순으로 정렬해 달라 {match} Route컴포넌트에서 자동으로 설정되는 값 match.params를 통해 파라미터를 들고옴 :username값이 위에 파라미터 location을 통해 쿼리 추출 qs를 파싱해서 serch조회 파싱을 하지 않으면 {?a=1}이라는 값이 나옴 파싱하면 파라미터건 쿼리건 값을 불러올떄 문자열로 불러온다 그래서 비교할떄 true도 문자열로 react router dom npm i react-router-dom index.js페이지에서 BrowserRouter을 가져와서 App컴포넌트를 감싸준다 App.js컴포넌트에서 Route를 불러온다. path는 특정경로의 요청이 오면 특정component를 보여주겠따. exact는 완전히 일치할때만 보여주겠따. path에 /는 브라우저에 /요청하고 /about요청 둘다 해당이 되기 때문에 exact를 써서 완전히 일치할대만 보요주겠따. Link는 눌렀을때 특정 경로로 가고 싶을떄. 홈을 누르게 되면 브라우저 주소창에 /를 입력하게 된다. 소개를 눌렀을때 주소창에 /about router spa spa에서는 라우팅을 클라이언트가 담당 여기가 어떤 주소 non-spa 여러개의 페이지로 구성되었음. 유저가 /about페이지로 들어오게 되면, /about페이지에 관한 정보를 서버에 요청을 하고, 서버가 이에 대한 응답으로 클라이언트에 전달, 또 어떤 유동적인 정보(db)에 있는 정보를 줘야할 경우 서버에서 db랑 연동을 해서 클라이언트에 보내준다 문제점, 사용자와 상호작용이 많은 경우 서버에 계속해서 요청을 하니 적합하지 않다. spa에서는 어떤 주소에서 어떤 ui를 보여줄지 클라이언트에서 담당 /about페이지에 들어가고 싶을때 서버에 요청을 하지 않고 보여줌, /about페이지에 값을 보여줄때 어던 동적인 작업이 필요하면 특정 api 서버 쪽에 요청을 해서 json형식으로 받아온다. 처음 .. 이전 1 다음
