Sumin's Blog

4.0 Fetching Movies from API Axios fetch위에 있는 작은 layer 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 axios.get() axios로부터 온 data를 잡아야함 axios는 느려서 javasscript에게 componentDidMount함수가 끝날떄까지 기다려야한다고 전해야함 asyncasync componentDidMount(){ const movies= axios.get("https://yts-proxy.now.sh/list_movies.json"); } function 따로 만들고 async await 이용getMovies=async()=>{ //async: 함수가 비동기라는 것 const movies= ..

3.3 Planning the Movie Component class App extends React.Component{ state={ //지금의 isLoading 상태는 true isLoading:true }; componentDidMount(){ //component가 생성되면 호출 함수 setTimeout(() => {// delay function (6초 후 실행) this.setState({isLoading : false}); },6000); } render(){ const{isLoading}=this.state; //isLoading앞에 this.state 매번 붙일 필요 없어짐 return {isLoading ? "Loading...":"We are ready"}; // isLoading==..

#3.0 Class Components and State state 는 보통 우리가 동적데이터와 함께 작업할 떄 만들어짐 class component와 function component 차이 function component function이고 뭔가를 return 하고 screen에 표시 class component class이지만 react component로부터 확장되고 screen에 표시되며 render method안에 넣어야함 react는 자동적으로 모든 class component의 render method를 실행하고자 함 state를 가지고 있음 state object component의 data를 넣을 공간이 있고 그 data는 변함 (state를 사용하는 이유) class App exten..

3.2 Component Life Cycle life cycle method 기본적으로 react가 component를 생성하고 없애는 것 mounting : component가 screen에 표시되는 것 constructor() 호출 render() 호출 componentDidMount() : component가 처음 render됐다는 것을 알려줌 (render() 이후 적용) updating : 사용자가 만든 함수에 의해 update (setState를 호출할떄마다 발생) render() 호출 componentDidUpdate () 호출 (setState 호출 -> component호출 -> renfer 호출 -> 업데이트 완료되면 componentDidUpdate 호출) unmounting : co..

3.1 All you need to know about State 목표: 매번 state의 상태를 변경할 때, react가 render function을 호출해서 바꿔주길 원함 this.setState() state는 object setState는 새로운 state를 받음 setState를 호출할 시, react는 state를 refresh하고 render function을 호출 setState를 사용하지 않으면 새 state와 함께 render function이 호출되지 않음 this.setState({count: this.state.count+1}); 이렇게 할 수도 있지만 state에 의존하는 것은 좋지 않음 this.setState(current=>({count: current.count+1}))..

2.4 Protection with PropTypes 목표 : father comonent로부터 전달 받은 props가 우리가 예상한 props인지 점검할 필요가 있음 각각의 요소에 추가할 것은 rating (number type) 점점 많은 props를 food object로 전달하고 싶기 때문 (component와 Food의 인자에도 추가시켜줌) prop-types : 내가 전달받은 props가 원하는 props인지 확인 import PropTypes from "prop-types"; 코드 추가해줘야함 Food.propTypes={ //이름은 무조건 propTypes 여야함 name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired..

2.3 map Recap map은 각각 item별로 function을 호출 function renderFood(dish){ return ; } function App(){ return ( {foodILike.map(renderFood)} ); } //map에 renderFood라는 함수를 인자로 줘서 renderFood 함수에서 별도로 return값을 정의 console.log(foodILike.map(renderFood))} error가 뜸 이유? 기본적으로 react component react의 item들은 모두 유일해야함 이들을 list안에 집어넣을 떄, 유일성을 잃어버리게 됨 해결방법 각각의 item에 id라는 속성을 추가 (각각 다른 name과 image를 갖고있지만 react는 똑똑하지 않아..

2.2 Dynamic Component Generation map: array의 각 item에 function을 적용 후, 그 result로 array를 반환 import React from 'react'; function Food({ob,picture}){ return I like {ob} } const foodILike = [ { name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4..

#2.1 Reusable Components with JSX + Props JSX 장점 : 재사용 가능한 component를 만들 수 있음 component를 계속해서 반복 사용 가능 Food component에 정보를 보내는 방법 fav라는 이름의 property 를 kimchi라는 value로 줌 다양한 타입의 value를 가질 수 있음 console.log(props)를 출력하면 property: value 모두 출력됨 누군가가 food component로 정보를 보내려고 하면, react는 모든 property를 가져옴 그리고 food function component의 argument(인자)로 모든 property를 넣음 props 중 fav의 값 출력 하기 위함 probs.fav -> {fav..

2.0 Creating your first React Component 리액트 : 개발자가 쓰는 모든 요소들을 생성 Java Script로 만들고 HTML에 넣음 모든 요소들을 사이에 넣음 Virtual document object -> react는 virtual 이여서 빠름 npm start 를 콘솔에서 계속 실행해야 서버가 실행 가능 componenet : HTML을 반환하는 함수 ( react는 componenet와 함께 동작 ,모든 것이 component) ex) (component의 형태) component를 사용해서 HTML처럼 작성하려는 경우에 필요 HTML 과 JS 의 조합으로 jsx라고 불림 (react 사용 유일한 개념) potato.js import React from "react";..