React (4) 썸네일형 리스트형 router Link를 사용하려면 반드시 Router안에 있어야 함! Browser라우터가 Hash라우터와 다른점은 #가 없다는 것 => github page에 업로드하기 힘들다고 함 각각의 상세페이지를 위해서 router에 props를 같이 전달하고싶다. 라우터 안의 모든 라우트들은 기본적으로 props가 전달됨. history location match staticContext 추가로 props를 전달하기 위해서 안의 to 속성을 object로 담아서 보낼 수 있다. 근데 왜 hash,search, pathname모두 전달이 되는데 필요한 state에만 값이 안들어가는걸까.. 상태 1. mounting - constructor(자바스크립트 class 생성 시 호출) 컴포넌트가 마운트될 때, 화면에 표시될 때, 컴포넌트가 나의 웹사이트에 갈 때 constructor호출 - render (setstate 실행시) componentDIdMount으로 rendered 완료 확인 2. updating - 사용자에 의해 업데이트 componentDIdUpdate으로 updated 완료 확인 3. unmounting - 컴포넌트가 죽는 것 PropTypes / state map은 요소를 하나씩 처리 후 배열로 반환 PropTypes로 원하는 데이터타입으로 들어왔는지 확인 가능 class 컴포넌트는 react.component를 extends한다. function 컴포넌트는 바로 return했지만 class는 react.component의 render과정을 거쳐야 한다. - React는 자동적으로 class 컴포넌트의 render를 실행한다. 쓰는 이유? state때문에! state는 오브젝트로 컴포넌트의 동적인 데이터를 담는다. (변하는 데이터!!!) state는 직접 설정하면 안되고 setstate를 거쳐야 한다. setState를 거칠 때마다 리액트는 새로운 state와 함께 render를 호출한다. render 과정을 거쳐 새로고침하는 효과를 주지만 화면은 깜빡이지.. 쌩초보 React 시작 - jsx 가상 DOM(Document Object Model) 방식이므로 빠르다. = 실제 소스코드가 웹 페이지에서 보여지지 않는다. js -> html안에 넣어서 동작시킨다 -> 자바스크립트 + html = jsx (유일한 react 개념) 컴포넌트는 HTML을 반환하는 함수 App.js(컴포넌트)는 와 같이 표기 1. React application은 한 번에 하나의 컴포넌트만 렌더링가능 단, 컴포넌트 안에 다른 컴포넌트를 import 해서 사용가능 2. 컴포넌트에 많은 속성(property)을 인자로 보낼 수 있다. 즉, 반복하지 않고 컴포넌트를 재사용 가능하다 html의 속성과 매우 비슷해보임 이전 1 다음