useEffect4

• 

  React useEffect (included api 호출) 가 있는 컴포넌트 분리 방법 자식 컴포넌트에서는 아래와 같이 쓰고 export const childComp = () => { const [data, setData] = useState(); useEffect(() => { refresh(); },[]) const refresh = () => { fetch("URL") .then((res)=> res.json()) .then(_newData => setData(_newData)); } return [data, refresh]; } 부모 컴포넌트에서는 아래와 같이 쓴다. import childComp from "./childComp"; const parentComp = () => { const [data, refresh] = childComp(); return ( Refresh! ) }.. React & TypeScript/React 2022. 4. 29.

• 

  [javascript] try..catch & 에러 핸들링 try { // 코드... } catch (err) { // 에러 핸들링 } finally { // 에러 발생 여부와 상관없이 try/catch 이후에 실행됨 } 위와 같은 방식으로 작성한다. 어떤 코드가 에러가 발생할 수 있기 때문에 그에 대한 대비책으로 코드를 작성해둘 수 있다. useEffect 안에서 무조건 실행되지 않는 구문이 있을 수 있다. 그런 경우에 catch 문을 활용해서 로그인 화면으로 이동시키거나, 특정 String으로 적용시키는 게 좋을 수 있다. 코드라는 게 완벽할 수 없다. 어떤 상황에 에러가 발생할지 예상은 하지만 모든 예상이 불가능하다. 그렇기 때문에 위 코드를 작성하는 것이다. 스크립트가 중단되는 것을 막는 것이다. 과용하면 코드가 복잡해질 가능성이 매우 크다. 중요한 핵심.. Javascript/Basic 2021. 5. 27.

• 

  [React] useEffect 는 무엇인가? 간단하게 말하면, Render 이후에 처리하는 함수이다. Render가 되었다는 것은 DOM 구조까지 이미 생성이 모두 완료된 시점이다. 이 시점에 처리해야 할 일들을 effect에 모아두었다가 처리하는 것이다. DidMount, DidUpdate, willUnmount 이 세가지 상황에 쓰인다. 참조 : ko.reactjs.org/docs/hooks-effect.html#example-using-hooks-1 React & TypeScript/React 2021. 2. 2.

• 

  [React] useRef() 는 언제 사용하는가? 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com React에서 useRef를 사용하는 경우는 다음과 같다. useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우. - 예를 들어, 값을 여러개 일력하고 첫 번째 칸으로 이동해야 하는 경우 필요하다. //InputTest.js import React, { useState, useRef } from 'react'; function InputTest(.. React & TypeScript/React 2021. 1. 29.