[모각코] 6회차(01.13) 계획
·
🎒 학교/20 동계 모각코: 와팬호
알고리즘 문제 해결 - 스택/큐 리액트 공부
#2-2 USEEFFECT
·
💻 Study/웹
2.6 useScroll & useFullscreen useScroll user가 scroll하여 무언가 지나쳤을 때, 색상을 바꾸는 등 무엇이든 할 수 있다. 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.removeEventListener("scroll", onScroll); }, []); return state; }; c..
#2-1 USEEFFECT
·
💻 Study/웹
2.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..
#1 USESTATE
·
💻 Study/웹
1.0 Introduction to useState리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다.import React, { useState } from "react";const [item, setItem] = useState(1)item: 변경할 statesetItem: item의 modifier Hooks vs Class componentimport React, { useState } from "react";// Hooks로 구현한 경우function App() { const [item, setItem] = useState(1); const incrementItem = () =..
🌊[코딩테스트 연습] - 기능개발🔥
·
🧇 Algorithm/프로그래머스
문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발 속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 ..
#0 INTRODUCTION - 리액트 Hooks
·
💻 Study/웹
0.2 Introduction to NooksHooksfunctional component에서 state를 가질 수 잇게 해준다. functional programming style이 된다. 0.3 RequirementsReact, Node.js 지식0.4 Workflow