React (8) 썸네일형 리스트형 React 이벤트 변수명 리액트에서 이벤트 나타내는 prop => on[Event] ex) onButton 이벤트 처리 함수 => handle[Event] 일반적 ex) handleButton React hooks - useEffect - useEffect 기본적으로 렌더링 직후 실행 두번째 배열에 어떤 값을 주느냐에 따라서 다르게 동작 인자없이 사용 => 렌더링 이후 실행 (계속) useEffect , [] =>처음 렌더링시만 한번 실행 useeEffect, [특정 값] => 특정 값 변경될때만 호출 return 사용 ( 뒷정리 cleanup ) =>렌더링 될때마다 실행됨 return, [] => 언마운트 될 때만 뒷정리 함수 호출 참고자료 https://velog.io/@velopert/react-hooks Class constructor에서 super()의 사용 constructor 안에서 super() 꼭 사용해야한다. //super() 가 불리지 않으면, this가 초기화 되지 않는다. super(props) Constructor안에서 this.props 접근하려면 사용해야 한다, 참고 블로그 https://medium.com/@umioh1109/react-es6-class-constructor%EC%97%90%EC%84%9C%EC%9D%98-super-9d53ba0611d9 Container Presenter Pattern Container date , state가지고 , api 불러옴 //모든 로직을 처리 //데이터 Presenter 데이터들을 보여주는 역할 //스타일 Index Container를 import Route path에서 :가 의미하는건 id이다 //뭐든 와도 됨 //path="/show/:id" //path="/show/:potato" Axios Axios instance 설정가능 // baseURL, headers, timeout 여러곳에서 반복 작성하지 않아도 됨 버전으로 다운로드 yarn add axios@0.18.1 axios.create로 변수에 공통된 주소 , 주소의 속성들인 key, language 설정 api.get(api 불러올 쿼리)로 값을 가져옴 ex) 1 2 3 4 5 6 7 const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: "10923b261ba94d897ac6b81148314a3f", language: "en-US" } }); 절대경로 / baseURL 덮어쓴다 상대경로 React에서 CSS 적용하기 1. css 파일 만들고 import 2. css 모듈 className임의로 생성해서 css가 global이 아닌 lcoal 작은 프로젝트에 유용 이름 뒤에 .module 붙여서 사용 ex) Header.module.css - 단점 className 기억해서 사용해야 함 - 사용하려면 [" "] ex) styles["navList"]; 3. styled-components 다운로드 yarn add styled-components css 초기화 yarn add styled-reset withRouter 다른 컴포넌트를 감싸는 컴포넌트 Router에게 정보를 준다 어떤 컴포넌트와도 연결 가능 Router 라우팅 주소에 따라 다른 뷰를 보여주는것 리액트엔 기능이 없어서 react-router-dom 사용 Router Header.js 에서 링크 클릭시 url로 이동 => Router.js 에서 해당 url에서 보여질 파일을 연결해줌 path: 주소창 component: 실행 될 파일 Link (Header.js 에서 사용) 는 Router 안에 있어야 한다. ex) 1 2 3 4 5 6 path 뒤에 exact 붙으면 : 주어진 경로가 정확해야 컴포넌트로 이동 ex ) path="/" exact component={Home} Redirect Route 중에서 일치하는게 하나도 없으면 어느 페이지든 받아서 / (Home)으로 보내줌 fragments 참조 블로그 https://velog.io/@ki_blan.. component, Component Life Cycle, state , setState 키워드 npm npx virtual DOM jsx component create-react-app PropTypes class es6 state extends life cycle method mounting Updating Unmounting axios async await setState component HTML을 반환하는 함수 이러한 HTML과 Java script의 사이의 조합 : jsx //javascript 안의 HTML component 만들때 import 꼭 적기 //이곳에 있는 jsx가 component 사용함 application에 하나의 component만 렌더링 가능 //많은 component import해서 사용 가능 첫글자 대문자로 클래스 컴포넌트 state render 사용 함.. 이전 1 다음