ReactJS (12) 썸네일형 리스트형 Deploy npm install gh-pages github는 무료로 웹사이트를 제공한다. deploy는 build 폴더를 이용해 홈페이지를 만든다. predeploy는 deploy가 실행되기 전에 자동으로 실행되며, build를 실행시킨다. build는 우리가 작성한 js 파일과 css 파일을 static으로 바꿔준다. npm run start로 서버가 돌아가는 상황에서 npm run deploy를 입력하면 된다. predeploy - build - deploy 순서대로 작업이 이루어진다. 홈페이지 URL은 {github이름}.github.io/{repository이름} 소문자만 사용해야한다. 대문자는 모두 소문자로 바꿔서 쓰면 된다 홈페이지가 만들어지려면 대기시간이 좀 필요한 모양 Making Movie App 사람들은 데이더를 fetch할 때 fetch를 사용하지만 여기선 axios를 사용할 것, axios는 fetch위에 있는 하나의 레이어. npm install axios YTS에서 만든 API를 사용 jsonview라는 크롬 extension이용하면 웹브라우저에서 json 파일을 깔끔하게 볼 수 있다. 시크릿 탭에서 https://yts-proxy.now.sh/list_movies.json로 접속하면 영화 리스트 많음 Component Life Cycle 컴포넌트는 render함수를 많이 사용하지만, 이외에도 다양한 함수를 가지고 있다. 이들은 life cycle method를 가지는데, 이건 react가 컴포넌트를 생성하고 없애는 방식이다. 컴포넌트가 렌더되기 전후로 호출되는 함수가 있다. mount, update 등이 있다. componenetDidMount는 첫 렌더링이 끝난 뒤 호출되는 함수 https://velopert.com/1130 State state는 수정할 데이터, 추가할 데이터 등 Dynamic Data를 작업할 때 쓰인다. function component를 class component로 바꾼다. react는 자동으로 class component의 render method를 실행한다. setState를 사용하면 새로운 값과 함께 페이지가 render 된다 this는 현재 class에 포함된 함수/상수라는 뜻 Prop-types prop-types는 내가 전달받은 props가 내가 원하는 props인지 확인해주는 것.(실수 방지) npm i prop-types Map object list에서 정보를 가져오는데, 반복적인 일에는 Map 함수를 이용해 Dynamic Component Generation. map 함수는 원하는 함수를 리스트의 모든 요소에 적용한다. 이때 react는 멍청하기 때문에 각각에 id를 붙이고, property에도 key:id 를 넣어주면 좋다. Props 컴포넌트를 호출할 때 property들을 넣어줄 수 있는데, 이건 그 함수의 인자로 쓰인다. 아래와 같이 사용할 컴포넌트의 이름을 적고, 뒤에 property들을 차례로 적는다. 컴포넌트 함수에서는 인자들을 하나씩 적을 필요 없이 props만 적어도 괜찮다. 이때 인자로 {number}이라고만 써도 함수가 이를 이해한다. Component Component는 HTML을 반환하는 함수 함수를 컴포넌트로 사용하기 위해서는 이렇게 표현한다. : 컴포넌트를 사용해서 HTML처럼 작성할 때 react가 사용된다. javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다. jsx는 javascript 안의 HTML이라고 생각하면 된다. jsx는 react에 특화된 거의 유일한 개념이다. 그 외에 react에서 쓰이는 개념들은 모두 javascript와 일맥상통 유의해야 할 점은, react application은 한 번에 하나의 컴포넌트만 렌더링 할 수 있다는 점 App 컴포넌트 안에 다른 컴포넌트를 넣어서 사용. 이전 1 2 다음
