2021/04(62)
-
#3.3 Planning the Movie Component
#3.3 Planning the Movie Component 🧁 이번시간에는 우리 Movie App의 컴포넌트를 계획해볼 것이다. 우선 어플리케이션을 mount하자마자(mount: 컴포넌트가 생겨나는 것) state에 isLoading 변수를 true라고 선언해준 후, render에서 div 코드 안에 isLoading이 true라면 "Loading…"을, isLoading이 false라면 "We are ready"를 표시하도록 작성해준다. 원래는 this.state.isLoading이라고 적어주어야 하지만 ES6 문법을 통해 저렇게 적어주었다! import React from "react"; import PropTypes from "prop-types"; class App extends React.Co..
2021.04.12 -
#3.2 Component Life Cycle
#3.2 Component Life Cycle 🍑 이번 시간에는 리액트 컴포넌트의 life cycle 메소드에 대해서 알아보겠다. 현재 우리는 리액트 컴포넌트에서 제공하는 메소드 중에서 render 메소드만 사용하고 있다. 그런데 사실 리액트 컴포넌트는 단순히 render 말고 더 많은 걸 가지고 있다. 이들은 life cycle 메소드를 가지는데, life cycle 메소드는 기본적으로 리액트가 컴포넌트를 생성하는 그리고 없애는 방법이다. 컴포넌트가 생성될 때 render 전에 호출되는 몇 가지 function이 있다. 컴포넌트가 render 된 후 호출되는 function 들이 존재한다. 예를 들면 우리가 add 함수를 통해 +1 +1 +1을 할 때 , 컴포넌트가 업데이트 될 때 호출되는 다른 함수가..
2021.04.12 -
#3.1 All you need to know about State
#3.1 All you need to know about State 🎈이번시간에는 state안의 데이터를 업데이트하는 방법인 setState에 대해 알아보겠다. ⭐ state 안의 데이터를 업데이트 하려면 어떻게 해야할까? 🎈 잘못된 방법 add = () => { this.state.count = 1; }; minus = () => { this.state.count = -1; } 왠지 이렇게 작성하면 될 것 같지만 이렇게 작성하면 "직접 state를 변경하지 마시오"라는 메시지가 나오며, 또한 코드도 동작하지 않는다. 그 이유는 위와 같이 작성하면 리액트는 render 메소드를 refresh하지 않기 때문이다. 매번 state의 상태를 변경할 때 react가 render 메소드를 호출해서 바뀐 데이터가 ..
2021.04.12 -
#3.0 Class Components and State
#3.0 Class Components and State 🍧 이번 시간에는 state에 대해 배워보겠다. 이제 state에 대해 배워볼 것인데, state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 그러나 우리가 지난시간 까지 했던 food 예제는 일일이 데이터를 손으로 입력했기 때문에 state를 배우기에 적절한 예제가 아니므로 지운다. import React from "react"; import PropTypes from "prop-types"; export default App; ( 이 상태에서 시작! ) 🍧 클래스 컴포넌트 사용하기 import React from "react"; import PropTypes from "prop-types"; class App extends Reac..
2021.04.12 -
#2.4 Protection with PropTypes
#2.4 Protection with PropTypes 🍪 이번 시간에는, PropTypes에 대해 알아볼 것이다. (Props의 타입을 체크하거나, 데이터가 반드시 필요한데 없다거나 하는 것들을 체크할 수 있는 것) 우리 foodILike 데이터에 rating이라는 항목을 추가할 것이다. rating은 String 타입이 아니라 number이다. (그냥 평점이라는 항목을 추가 한 것!) 🍪 proptypes 설치하기 prop types를 설치할 것이다. 설치 : npm install prop-types 🍪 proptypes가 하는일? *prop-types가 하는 일은 내가 전달받은 props가 내가 원하는 props인지 확인해주는 것이다. 우리는 실수를 할 수도 있고, 예를 들어 이 경우에 food c..
2021.04.12 -
#2.2 ~ 2.3 동적 데이터를 추가하는 방법 / map 함수 이용
#2.2 동적으로 데이터를 추가하는 방법 🍧 이번 시간에는 웹사이트에 동적 데이터를 추가하는 방법에 대해 알아보겠다. 🍧 지난시간처럼 복사 붙여넣기는 비효율적! function App() { return ( hello!! ); } 지난시간에는 컴포넌트를 이렇게 복사해서 붙여넣었기 때문에 효율적이지 않다. 왜냐하면 우리가 새로운 음식을 추가할 때마다 복사 붙여넣기를 해야하기 때문이다. 데이터를 우리가 처음부터 가지고 있던 데이터가 아니라 웹사이트에서 가지고 온 데이터라면 이렇게 할 수 없다. 데이터가 어떤 API를 통해 우리가 전달받는다고 상황을 가정한다. 따라서 할 일은 함수를 만드는 것이다. const foodILike = [{ name: "Kimchi", image: "http://aeriskitch..
2021.04.12