React18 [React] Nomad Coders - ReactJS로 영화 웹 서비스 만들기 (2.4강 Pretection with PropTypes) Nomad Coders - ReactJS로 영화 웹 서비스 만들기 (2.4강 Pretection with PropTypes) 공부 내용 정리 movie_app > src > App.js 코드 import React from 'react'; import PropTypes from "prop-types"; // propTypes: 내가 원하는 prop들을 받아왔는지 확인 // npm i prop-types 로 설치 function Food({ name, picture, rating }) { return ( I like {name} {rating}/5.0 ); } Food.propTypes = { name: PropTypes.string.isRequired, picture: PropTypes.string.is.. 2020. 6. 24. [React] John Ahn - 노드, 리액트 기초 강의 (29, 30강: 로그인 페이지) John Ahn - 노드, 리액트 기초 강의 (29강: 로그인 페이지) 공부 내용 정리 login > client > src > component > views > LoginPage.js 코드 import React, { useState } from 'react' import Axios from 'axios' import { useDispatch } from 'react-redux'; import { loginUser } from '../../../_actions/user_action'; import { response } from 'express'; function LoginPage(props) { const dispatch = useDispatch(); const [Email, setEmail] = .. 2020. 6. 22. [React] John Ahn - 노드, 리액트 기초 강의 (28강: React Hooks) John Ahn - 노드, 리액트 기초 강의 (28강: React Hooks) 공부 내용 정리 Class / Functional Component Hook - React Hooks are functions that let us hook into the React state and lifecycle features from function components. - React Hooks are currently available in the alpha release of react@16.7.0-alpha.0. Class Component Functional Component componentDidMount() → useEffect() this.state → usestate 참고 강의 : youtu.be/L_.. 2020. 6. 22. [React] John Ahn - 노드, 리액트 기초 강의 (26강: Redux 기초 - 27강: Redux Up! ) John Ahn - 노드, 리액트 기초 강의 (26강: Redux 기초 - 27강: Redux Up!) 공부 내용 정리 Redux - predictable state container for JS apps - state 상태 관리 library 출처: https://www.liberaldictionary.com/redux/ - 예를들어 댓글을 관리하는 component 중 하위 component에서 변경이 일어나면 그 변경된 값이 상위 component를 타고 타고 올라가야 한다. 그러나 redux를 이용하면 외부의 store를 통해 변경된 지점에서 직접 정보를 주고받을 수 있다. - 한 방향으로 흐른다. Action : 무엇이 일어났는지 설명하는(상태를 알려주는) 객체 Reducer : 기존state값.. 2020. 6. 21. [React] John Ahn - 노드, 리액트 기초 강의 (15강: 리액트란? - 25강: Antd CSS Framework) John Ahn - 노드, 리액트 기초 강의 (15강: 리액트란? - 25강: Antd CSS Framework) 공부 내용 정리 Real Dom / Virtual Dom Real Dom Virtual Dom - 10개의 list 중 하나의 list만 변경이 있어도 10개 list 전체를 Reload 해야 됨. - 비용이 큰 작업 - 10개의 list 중 하나의 list만 변경이 있으면 그 한가지 아이템만 dom에서 바꿔준다. - 부하가 걸리지 않고, 비용이 적게 든다. - Real Dom을 copy 한 것 ( Real Dom과 같은 properties를 갖는다.) 1. Virtual Dom에서 Real Dom의 스냅샷을 찍어놓는다. 2. 바뀐 부분이 있나 관찰을 한다. 3. 바뀐 부분이 있으면 Real.. 2020. 6. 20. 이전 1 2 3 4 다음
