전체 글301 [react-router nesting 연습] 주의 : 1. functional 컴포넌트에서 함수를 호출하기 위해서는 useEffect( ) 안에 넣어야 한다. (axios, fetch) 2. axios, fetch를 사용한 후 사용하고자 하는 데이터를 추출. 추출 후 반드시 useState로 state값을 전달해야 한다. ----------------------------------------------------------------------------------------------------------------------------------- 주의: Link와 Route의 parameter는 상관관계에 있다. page1의 첫째 자식의 path는 "/" 이다. 이는 "홈"화면을 경로로 성정한 것이다. 즉, 부모인 Page1 컴포넌트가 보여.. 2020. 9. 23. react-router-dom Router: 네트워크에서 데이터의 전달을 촉진하는 중계 장치 Route: 길(경로/루트), 노선 Route에게 자식이 있을 경우 "/"는 기본적으로 "/부모"의 경로를 가지고 있다. Link를 사용할때 반드시 "/부모"를 같이 표시해줘야 한다. HTML5의 history API(pushState, replaceState and the popstate event)를 활용하여 UI를 업데이트 props : basename / forceRefresh / getUserConfirmation / keyLength URL의 hash를 활용한 라우터입니다. 정적인(static)페이지에 적합합니다. - 요청받은 pathname(경로)에 해당하는 컴포넌트를 렌더링합니다. 에서 전달한 pathname을 가 받는다. (r.. 2020. 9. 21. Object literal (객체 리터럴) webclub.tistory.com/390 const 오브젝트 = { key : value } ← property(key & value) [객체 리터럴 사용방법] OpenWindow라는 함수에 객체 리터럴을 이용해 options 객체를 구성, 함수를 호출하는 데 사용하는 인자를 전달하는 값으로 사용. OpenWindow 함수 내부에서는 인자를 전달받는 options에서 "path", "windowName", "windowOption"속성이 있느지 체크한다. 없다면 각 기본값을 이용하게 된다. 객체 리터럴은 중첩된 표현도 가능하다. 아래는 obj 객체의 parent속성에 다른 객체를 할당하는 코드. [객체 정의] youtu.be/vrhIxBWSJ04 사용자 정의의 객체를 정의하기 위해 자바스크립트에서는 c.. 2020. 9. 16. CSS: styled-components www.youtube.com/watch?v=eQkkoUEVY-Q www.youtube.com/watch?v=c5-Vex3ufFU&t=372s [공부해야 할 것] - styled-component와 연산자(operators) - styled-component와 Hooks(useState) [ThemeProvider] 1. npm install --save styled-theming 2. import { ThemeProvide } from 'styled-components' 3. accepts a single proptheme which you should pass an object with either strings or getter functions. For example: theme(name, valu.. 2020. 9. 15. create-react-app 파일 구조. [정보 찾아야 함] www.youtube.com/watch?v=mWKMrL6FmXU 2020. 9. 15. Axios tutorial#3: When using multiple API's Api를 여러개 사용할때 instance를 만들지 않고 함수에 넣어 바로 사용할 수 있다. 1. axios api를 호출하는 함수를 생성 2. axios로 호출한 데이터를 담을 변수 생성 3. 호출한 데이터 오브젝트를 구조분해 할당 4. 구조분해한 오브젝트를 state값으로 할당 해당 컴포넌트에서 사용준비 완료. 2020. 9. 14. 이전 1 ··· 41 42 43 44 45 46 47 ··· 51 다음
