웹개발/JavaScript
-
React Hooks (3)웹개발/JavaScript 2021. 1. 12. 18:34
- useScroll · 때때로 유저가 스크롤 해서 무언갈 지나쳤을 때 색상을 바꾸거나 무엇이든지 할 필요가 있음 import React, { useEffect, useState, useRef } from "react"; import ReactDOM from "react-dom"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({y: window.scrollY, x: window.scrollX}); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.r..
-
React Hooks (2)웹개발/JavaScript 2021. 1. 10. 13:14
* Use Effect · useEffect는 componentWillUnmount와 componentDidMount, componentWillUpdate와 비슷함 · useEffect는 2개의 인자를 받는데 첫 번째 인자는 function으로써의 effect 두 번째 인자는 deps, deps가 있다면 effect는 (deps) 리스트에 있는 값일 때만 변하도록 활성화 import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const sayHello = () => console.log("hello"); const [number, setNumber] = useState(0..
-
React Hooks (1)웹개발/JavaScript 2021. 1. 6. 22:41
· 리액트의 신박한 기능으로 state, component에 대한 것들을 바꿔놓을 예정 · functional component에서 state를 가질 수 있게 해줌 · 앱을 리액트 훅으로 만든다면, class component, did mount, render ... 이런 것들을 하지 않아도 됨 · 모든 것은 하나의 function이 되는 것 (functional programmimg 스타일이 된다는 뜻) · 훅의 역사는 recompose 라이브러리에서 시작됨 (함수형 프로그래밍이고, state를 줌) · 즉, recompose + 리액트팀의 결합 = 리액트 훅 - React Hooks를 사용하지 않는 경우 import React, {Component} from "react"; class App exte..
-
ReactJS로 영화 웹 서비스 만들기웹개발/JavaScript 2021. 1. 4. 23:18
[노마드코더] ReactJS로 영화 웹 서비스 만들기 - HOME - ABOUT - 영화 제목 클릭 : 각 영화의 전체 설명을 볼 수 있음 - 웹 사이트 501501.github.io/movie_app/#/ Movie App 501501.github.io - 소스코드 github.com/501501/movie_app/commit/33528090ff38de487a8950197284b6af7fa18eff #2.0 movie_app · 501501/movie_app@3352809 ... github.com
-
ReactJS (5)웹개발/JavaScript 2021. 1. 4. 21:38
* Fetching Movies from API · axios : axios는 마치 fetch 위에 있는 작은 layer 터미널에 npm install axios 하여 설치 //async //javascript에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해주고 그걸 기다려줘야 함 async componentDidMount(){ const movies = axios.get("https://yts-proxy.now.sh/list_movies.json"); } * Rendering the Movies getMovies = async () => { const movies = await axios.get("https://yts-proxy.now.sh/list_movies..
-
ReactJS (4)웹개발/JavaScript 2021. 1. 4. 16:27
* Class Components and State · state : 보통 우리가 동적 데이터와 함께 작업할 때 만들어짐 변하는 데이터, 존재하지 않는 데이터 그리고 생겨나고 그러고선 사라지고 또는 변경된 데이터, 하나인 데이터 그리고 두 개가 되고 또는 0이 되는 그런 종류의 것들 -> dynamic data 그리고 이런 props를 우리는 돕지않음 우리가 필요한 건 state · class Component class App extends React.Component{} //필수 (class react component) : react component는 뒤에 많은 것을 가지고 있고 그 중 하나가 우리가 이야기할 state 그리고 매번 우리가 component를 만들 때마다 모든 것을 다 구현하고 싶..
-
ReactJS (3)웹개발/JavaScript 2021. 1. 3. 18:24
* Reusable Components with JSX+Props · jsx : component에 정보를 보낼 수 있음, react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점 이 말은 component를 계속해서 반복해서 사용할 수 있다는 것 - component에서 component로, children component로 정보를 보내는 방법 (1) react의 개념: food component에 kimchi라는 value로 prop name을 줌 import React from 'react'; function Food() { return I like Potato; } function App() { return ( Hello ); } export default App; food..