jineecode

import React from "react"; class App extends React.Component { state = { isLoading: true }; render() { return {this.state.isLoading ? "Loading" : "We are Ready"}; } } export default App; /// {this.state.isLoading ? "Loading" : "We are Ready"} 이것은 ES6 문법으로 바꿔 써볼 수 있다. class App extends React.Component { ... render() { const { isLoading } = this.state ; return {isLoading ? "Loading" : "We are Read..

class App extends React.Component{ } React class component에서 가져오고 있음. function이 아니기 때문에 return을 가지고 있지 않음. render method를 가지고 있음. extends > react가 가진 컴포넌트를 app에 상속해준다고 보면 된다. class App extends React.Component{ render() { return Im a class component; } } render : App의 렌더가 어떻게 표시해줄 것인지 결정해주는 메서드. 바로 만들어 주는 것이 아닌, '이렇게 만들겠다' 라고 보면 된다. function component와 class component의 차이 :function component는 fun..

내가 전달받은 props가 내가 원하는 prop인지 확인하는 도구. 터미널에 npm i prop-types 를 해준다. 잘 설치됐는지 확인하는 방법은 package.json 파일에서 prop-types 가 있는지 확인한다. 본격적으로 prop를 검사하는 코딩을 넣어 확인해보자. import React from "react"; import PropTypes from "prop-types"; const foodILike = [ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { id: 2, name: "Samgyeopsal", image: "https:/..

1. 컴포넌트에 prop name과 value를 주기. import React from 'react'; function Food() { return I love potato } function App() { return ( hello! ); } export default App; 은 HTML 구조와 몹시 유사하게 생겼다. 꼭 name이 아니어도 괜찮다. import React from 'react'; function Food() { return I love potato } function App() { return ( hello! ); } export default App; fav라는 이름의 프로퍼티를 김치라는 value로 준 것. 당연히 이런 식으로도 된다. function App() { return ..

1. 컴포넌트 ReactDOM.render( , //△컴포넌트를 사용하고자 할 때 컴포넌트의 형태 document.getElementById('here') ); 컴포넌트 을 App처럼 사용할 수 없다. 이러한 형태는 리액트로 동작하지 않는다. 2. component는 HTML을 반환하는 함수이다. function App() { return ( hello! ); } App() 함수는, HTML을 반환return한다. 3. js와 html 사이의 이러한 조합을 우리는 jsx 라고 부른다. react에서 나온 개념이다. 4. 컴포넌트를 작성할 때마다, import React from "react"; 를 써준다. 대소문자를 꼭 구분하자. 이것을 하지 않으면 react는 jsx가 있는 컴포넌트를 사용하는 것을 이..

1. src\App.js App.js 에 hello 를 넣으면 2. public\index.html public\index.html의 HERE! 자리에 hello 가 들어간다. 3. src\index.js 이 원리는 src폴더의 index.js에 담긴 코드가 렌더해주기 때문이다. 당연히, document.getElementById('root') 의 root를 변경해주면 에러가 뜬다. 관리자 도구에는 hello가 있는 것처럼 보이지만, 실제로 소스코드를 확인해보면 없다. *이것이 바로 react 가 빠른 이유다. react는 소스코드에 바로 html을 넣지 않고 html에서 html을 추가하거나 제거하는 법을 알고 있다. *virtual DOM 이다. github.com/uhj1993/movie_app_2..

터미널을 열고 npm start 를 입력하면 창이 뜬다. 1. git init 2. 깃허브에 레포지토리 만들기 3. git remote add origin (만들어진 주소) 4. git add . 5. git commit -m "내용" 6. git push origin master

1. 터미널에서 실행. npm run start 2. 실행 종료. ctrl C JS 코딩하는 법 1. public 폴더는 index.html 이 있는 곳. ( 이 react 파일을 실행한 결과가 담긴 html 이다. ) 2. root public/index.html html의 #root가 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root') ); document.get..