#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 메소드를 호출해서 바뀐 데이터가 ..

#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..

#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..

#2.2 동적으로 데이터를 추가하는 방법 🍧 이번 시간에는 웹사이트에 동적 데이터를 추가하는 방법에 대해 알아보겠다. 🍧 지난시간처럼 복사 붙여넣기는 비효율적! function App() { return ( hello!! ); } 지난시간에는 컴포넌트를 이렇게 복사해서 붙여넣었기 때문에 효율적이지 않다. 왜냐하면 우리가 새로운 음식을 추가할 때마다 복사 붙여넣기를 해야하기 때문이다. 데이터를 우리가 처음부터 가지고 있던 데이터가 아니라 웹사이트에서 가지고 온 데이터라면 이렇게 할 수 없다. 데이터가 어떤 API를 통해 우리가 전달받는다고 상황을 가정한다. 따라서 할 일은 함수를 만드는 것이다. const foodILike = [{ name: "Kimchi", image: "http://aeriskitch..

#2.1 Reusable Components with JSX + Props(컴포넌트에서 정보를 보내고 사용하는 법) 🍨 이번시간에는 컴포넌트에서 정보를 보내고, 정보를 사용하는 방법을 알아볼 것이다. 우리는 컴포넌트를 file을 이동하면서 작성하고 싶지 않기 때문에 App.js에서 컴포넌트를 작성하는 작업을 할 것이다. import React from "react"; function Potato(){ return I like Potato.; } function App() { return ( hello!! ); } export default App; ↑ App.js 이렇게 App.js 파일 하나에서 Potato 함수를 만들어서 사용할 수 있다. 🍨 JSX 에서는 컴포넌트에 정보를 보낼 수 있다! → 재사용..

#2.0 Creating your first React Component (컴포넌트에 대해 알아보기) 🍟 이번 시간에는 컴포넌트에 대해 알아보겠다. 🍟 컴포넌트(Component)란 무엇인가? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); ↑ index.js 기본적으로 이것을 component라고 부른다. react는 component와 함께 동작하며 모든 것은 component이다. component는 무엇일까? component는 보다시피 HTML을 반환하는 함수이다. import React from..