# withRouter
[삽질기#2] 잃어버린 getLayout을 찾아서..
next.js에서 여러 페이지에 동일한 레이아웃을 적용하고 싶다면, getLayout을 이용하게 된다. 자세한 사용방법은 공식문서를 참고하자 페이지마다 다른 레이아웃을 적용하고 싶을 때는 레이아웃이 필요한 컴포넌트의 getLayout을 따로 정의하고 \_app.tsx를 아래와 같이 설정하면 된다. 나의 경우에는 반대로 getLayout이 따로 정의되지 않으면 공통 레이아웃을 적용하고, 그렇지 않은 페이지에서만 getLayout을 정의해 페이지별 레이아웃을 적용시켰었다. 이전까지 잘해왔는데, 새롭게 개발한 페이지에 새로운 레이아웃을 적용하려고 getLayout을 정의했는데, 공통된 레이아웃으로 적용되는 문제가 생겼다. 원인 분석 내가 할줄아는 분석은 딱 하나, console.log() 이다. \_app.tsx에서 console.log(Component.getLayout) 을
React 실전 활용!
HOC(High Order Component) > advanced technique in React for reusing component logic > > > not part of the React API > > a pattern that emerges from React’s compositional nature. > HOC = function(컴포넌트) { return 새로운 컴포넌트; } 를 인자로 받아 를 리턴하는 함수 > props ⇒ component ⇒ UI > > component ⇒ HOC ⇒ NEW component > withRouter() 보통 with 가 붙은 함수가 HOC 인 경우가 많다. export default withRouter(LoginButton); > 사용하는 법 > > - Use HOCs For Cross-Cutting Concerns > - D
[React] 리액트 라우터로 SPA 개발하기
1. SPA란? SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 왔습니다. 리액트 같은 라이브러리 혹은 프레임워크를 시용하면 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해 줍니다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있습니다. SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양
[next.js] Link로 props 전달하기
query를 통해서 전달이 된다. books는 array로 구성되어 있기 때문에 문자화 작업을 해야 한다. withRouter로 Hoc 작업을 해준 뒤, 문자열화 된 books array 를 원래대로 parsing 한다.
React Router 2
Router 안에 Props URL 파라미터(Parameter)와 쿼리(Query) 파라미터 예시: /profiles/velopert 쿼리 예시: /about?details=true URL URL 파라미터는 라우트로 사용되는 컴포넌트에서 받아오는 match의 params를 참조한다. > profiles/:username 이라고 route path 를 설정해 주면 match.params.username 값을 통해 username 값을 참조하여 가져온다. URL 쿼리 쿼리는 location 객체에 들어있는 search 값을 조회 할 수 있음. 기초적인 사용방법? 
react Router withRouter와 routerHook
withRouter? 다른 것들은 무조건 Link를 사용해서 해당 component를 렌더링 하지만, withRouter를 사용하면, 굳이 Link없이도 화면 렌더링이 가능해짐 WithRouterSample.js같은 아무이름으로 파일을 만들고 난 후, 으로 import 그 다음에, 다음처럼 코드 작성 보다시피, 매개변수로 location, match, history를 받는 걸 알 수 있음 다른 .js파일에서 렌더링 부분에 WithRouterSample을 넣게 되면 image.png 다음같은 화면이 들어가게 됨 이 말은 뭐냐, 다른 .js파일로 부터 match에 대한 정보, 그리고 location에 대해 정보를 받았다는 걸 뜻함. 홈으로버튼을 눌러도