본문 바로가기

React4

리액트(React) 패키지 설치와 스타일 package.json { "name": "flix", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", "styled-components": "^5.2.1", "styled-reset": "^4.3.1", "web-vital.. 2020. 11. 25.
리액트 React 무비앱 만들기 dowonkim97.github.io/movie_app_2020/ React App dowonkim97.github.io package.json { "name": "movie_app_2020", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "axios": "^0.21.0", "gh-pages": "^3.1.0", "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", "re.. 2020. 11. 10.
리액트 React 삼항연산자, setTimeout, state 값 변경 알아보기 App.js import React from "react"; import PropTypes from "prop-types"; // render() -> mount -> componentDidMount() -> 6s class App extends React.Component { state = { isLoading: true, movies: [] }; componentDidMount() { setTimeout(() => { this.setState({isLoading : false}); }, 6000); } render() { const { isLoading } = this.state; return {this.state.isLoading ? "Loading...": "We are ready"}; } } e.. 2020. 11. 9.
리액트 React Components, State, Component Life Cycle 알아보기 App.js import React from "react"; import PropTypes from "prop-types"; // every time set.state -> render -> this.state.1,2,3,0,-1 -> re-render (this.state.count = 1 -> not work) class App extends React.Component { constructor(props) { super(props) console.log("hello"); } state = { count: 0 }; add= () => { this.setState(current => ({ count: current.count + 1 })); }; minus= () => { this.setState(cu.. 2020. 11. 9.

티스토리툴바