주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn Hooks에 관한 자잘한 팁들 use 시리즈들은 순서가 매우매우 중요해서 중간에 바뀌면 안된다. const Test = () => { const [number, setNumber] = useState(); // 1 const [string, useString] = useState(); // 2 조건문을 통해 생성의 여부를 결정하면 매우 위험하다. const Test = () => { const [number, setNumber] = useState(); // 1 const [string, useString] = useState(); /..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn useMemo와 useCallback Class에서 작업했던 것들을 Hooks로 옮기다보면 Class에서 문제가 되지 않던 부분들이 문제가 되는 경우가 있다. Hooks는 함수안에 있는 내용이 재 렌더링이 되는데, getNumbers라는 함수가 Hooks의 특성으로 인해서 재 렌더링이될 수 있다. import React, { useState, useRef, useEffect } from 'react'; function getNumbers(){ // ...... } const Test = () => { const numbers =() =..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn useEffect로 업데이트를 감지할 수 있다. 재 렌더링이슈가 없기때문에 state나 props를 쓰지 않으면 앞에서도 말했듯이 일반 함수로 생성하는 것이 좋다. componentDidUpdate가 될때 hooks(useEffect)로 변경할때 힘든 부분이 성능문제다. useEffect는 1:1로 대응되는 것이 아니기 때문이다. import React, { useState, useRef, useEffect } from 'react'; const Lotto = () => { const [numbers, setNumbers] = useS..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트에서 돔을 컨트롤할때 ref를 사용하여 접근한다. Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. 리액트는 대체로 돔을 컨트롤 하지 않아야하는데, input에 focus하는 작업등을 위해서 사용할 수 있다. *바람직한 사용 사례는 포커스, 텍스트 선택영역, 미디어 재생을 관리, 애니메이션 직접적 실행, 서드파티 DOM 라이브러리를 React와 사용할때라고한다. jQuery에서는 아래와 같이 작업을 한다. var input = $('.is-input'); input.focus()..