이것저것

왜인지 주소값을 유동적으로 변경시키는 것이 어렵다는 생각이 들어서 정리하게 되었다. 라우트에서는 단순히 유동적인 값이 들어가게 되는 경우에 Detail컴포넌트를 렌더하도록 설정해두었다. Link 컴포넌트에서는 아래처럼 path대신 쓰이는(path를 써도 된다) pathname 속성을 사용해 id값을 props로 받아와 넣어주었다. 이렇게 하면 들어오는 id값을 주소로 해서 Route가 렌더되게 된다. 렌더에서는 state라는 이름으로 여러 값을 또 전달받기 때문에, 특정 페이지에 맞는 정보를 보여줄 수 있게 된다. 당연히 조건에 따라 리다이렉트 시켜버릴수도 있다.

movie-detail을 클릭없이 주소를 입력할 때 홈으로 보내버리는 것이 강의의 목표이다. 네비게이션 바에서 Link컴포넌트에 props를 보내는 방식을 사용했다. (참고로 영화제목에 링크태그를 걸었다) 예를 들어 Link를 클릭해서 영화 detail페이지로 넘어가게 할 경우 인수로 state값을 보낸다. (여기서 state는 우리가 아는 state가 아닌 것 같다) 그러면 state값의 undefined 유무에 따라서 값이 있을 경우 페이지를 로드해주고, state값이 없을경우 Home으로 리다이렉트 시키는 것이다. 리다이렉트 시킬때는 propsops로 history를 받아 온 뒤, history.push("/") 함수를 써서 홈으로 보내버렸다. (정확히 무슨 원리인지는 모르겠지만 한가지 확실한건 h..

axios란?? fetch를 더 쉽고 간결하게 사용하기위한 모듈 / 비동기방식으로 HTTP데이터 요청을 실행한다. axios 설치 npm install axios --save axios import import axios from 'axios'; axios 사용법 const 변수이름 = axios.get("경로이름") const 변수이름 = axios.post("경로이름",{보낼 데이터}) 이렇게만 하면 놀랍게도 끝이다. 이제 여기에 .then() .catch() .finally()와 같은 함수들을 붙여서 사용하면 된다. 큰 데이터를 받아올때 async라는 접두사를 함수앞에 붙여서 이 함수가 비동기함수이고, 기다려야 한다는 것을 알려주어야 한다. 그리고 그 함수의 내부에서는 무엇을 기다려야 하는지 알려주..

라이프사이클은 크게 세 단계로 나눌수 있다. 클래스형 1. Mounting : 페이지가 처음 로딩될 때에는 다음과 같은 실행흐름을 갖는다. 1) constructor() : 클래스형 컴포넌트에서 사용하는 생성자 함수를 뜻한다. 2) static getDerivedStateFromProps : 이런게 있다는데 모름(상관없음) 3) render() : 우리가 알고있는 그 렌더함수이다. (return문은 렌더 안에 들어있기 때문에 생략) 4) componentDidMount() : 렌더가 완료된 뒤에 실행되는 함수이다. 실제 실행 결과 2. Updating : 컴포넌트가 업데이트 될 경우 다음과 같은 Update과정을 거친다 (이 중에서는 두가지만 보면 되기 때문에 나머지는 설명을 적지 않았다) 1) stat..