undefined

1. 오류 경계란? - 오류가 일어났을 때 웹사이트를 중지시키지 않고 에러관리를 할 수 있도록함. - 기본 자바스크립트 try and catch와 유사함 - 일종의 컴포넌트 - 함수형 컴포넌트에서는 이용이 불가하므로 class 컴포넌트로 사용되야함. 2. 사용 이유? - 자바스크립트의 try and catch를 이용한다면 물론 오류 관리가 되겠지만 그 범위는 해당 컴포넌트에 국한됨. - 오류경계 컴포넌트로 관리하고 싶은 컴포넌트를 감싸준다면 하위트리에 있는 모든 오류를 관리 가능하게함. 3. 사용 방법 (1). import Component import {Component} from 'react' (2). class 컴포넌트 생성 class ErrorBoundary extends Component { c..

1. useReducer란? -useState로는 관리하기 힘든 방대한 state를 관리할 수 있다. 2. 사용이유? -효율적인 state의 관리 but 항상 좋은건 아니다. 과할 수 있다. -여러개의 state를 하나의 객체 안에서 관리할 수 있다. 3. 사용 방법 (1). reducer import import React, { useState, useEffect, useReducer } from 'react'; (2). 기본형식 const [emailState, dispatchEmail] = useReducer(emailReducer, { value: '', isValid: null, }); const [현재 state, 업뎃용 state] = useReducer(함수,{기본값}) // 기본값의 값들..

1. useEffect 란? - react의 주요 임무는 화면을 렌더링하고 컴포넌트를 재사용 하는 것 - effect는 side effect라고도 하는데 주요 임무 외에 처리하는 모든 것을 뜻함 ex) Http 리퀘스트 - 특정 값이 변하면 실행하는 함수를 지정할 수 있다. (주기성 관리) - 응답으로 실행되는 행동에 도움이 된다. ex) input의 유효성 검사, 어떤 액션을 하면 로드되는 컴포넌트 2. 사용이유? - 값이 변할때마다 함수가 다시 사용되는 경우 트래픽이 과부화 될 가능성 3. 사용방법! (1). useEffect import import React, { useState, useEffect } from 'react'; (2). useEffect의 기본형식 useEffect(()=>{'실행..

1. Ref란? - 영어 Reference(참조)의 축약형으로 다른 DOM에 접근 가능하게 해준다. - 그 값은 Object이고 오브젝트 안에는 current가 존재하고 그 안에 값이 존재한다. 2. 사용이유? - useState와 비슷한 기능을 하지만 좀 더 간단한 코드의 구조를 가진다. - onChange의 input의 값을 구한다 했을 때 state를 사용하면 값이 바뀔때 마다 값이 변한다. - ref를 이용하면 제출될 때에만 값이 변하도록 조정 가능하다. 3. 사용 방법 (1). React에서 ref import해준다. import React, { useRef } from 'react'; (2). ref를 정의해준다. const nameRef = useRef(); const ageRef = use..

1. Portal 이란? - 컴포넌트를 원하는 위치에 렌더링 할 수 있다. ex) root의 바깥쪽 2. 사용이유? - 독립적인 위치에서 관리가능 (그러나 원래의 react의 기능 그대로 사용 가능) - modal 또는 sideBar 등 같이 논리적으로 맨 위에 있어야 할 컴포넌트를 맨 위의 위치로 이동 가능 3. 사용 방법 (1) index.html에 portal을 위한 위치 만들기 overlay-root를 만들었다. root는 기존 App.js 등이 들어간 div (2) reactDOM을 import import ReactDOM from 'react-dom'; portal은 reactDOM의 기능이다. (3) portal의 대상 만들기 const ModalOverlay = (props) => { re..