SOOM_BLOG [숨숨 블로그]

React Portals 컴포넌트를 렌더링 시킬 때 렌더링 시킬 DOM을 선택하여 부모 컴포넌트의 바깥에서도 렌더링 할 수 있게 해주는 기능 modal은 페이지 위의 오버레이이며, 논리적으로 모든 것 위에 위치해야한다. 스타일링을 통해 div가 modal처럼 보이게 하는 것은 바람직하지 않음. 이러한 부분을 해결하기 위해 React Portals를 배워보자. portal 이용 방법 컴포넌트를 이식할 위치가 필요함. index.html 에 이식 위치를 정한다. (index.html에서는 다양한 컴포넌트에 대한 여러 루트들을 만들 수 있다.) 해당 위치에 포털이 필요함을 컴포넌트에게 알려야 한다. 리액트 노드 : 렌더링 되어야 하는 리액트 노드 (반드시 JSX여야 한다) 포인터 : 요소들이 렌더링 되어야 하..

useImperativeHandle? useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes) 한다. useImperativeHandle는 forwardRef와 함께 사용한다. useImperativeHandle(ref, createHandle, [deps]) ref : 프로퍼티를 부여할 ref. createHandle : 객체를 리턴하는 함수. 해당 객체에 추가하고 싶은 프로퍼티를 정의하면 됨. 예제) 부모 컴포넌트 import React, { useState, useRef } from 'react'; import Input from '../UI/Input/Input'; const ParentCompo = (props) => { co..

CONTEXT 여러개의 컴포넌트에 영향을 미치는 state를 관리할 때, prop drilling(=prop chain)을 필요로 하는데, 이런 경우 prop으로 state를 계속해서 전달하게 되면 관리하기가 매우 어려워진다. 이런 어려움을 해결하기 위해 context를 배워보자. CONTEXT는 모든 수준에서 props를 수동으로 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공한다. 💡 CONTEXT를 사용해보자 1. createContext()를 통해 context 생성 전역 데이터를 관리하기 위해서 React 패키지에서 제공하는 createContext라는 함수를 사용한다. 개념적으로 React Context는 전역 데이터를 담고 있는 하나의 저장 공간이라고 생각할 수 ..

useState() useReducer() 주된 상태 관리 툴 이다. 더 강력한 상태관리 툴이 필요할 때 적합하다. 독립된 상태/데이터 조각에 적합하다. 처리할 데이터가 state의 부분들로 이루어진 state데이터 인 경우 사용하기 적합하다. 상태 업데이트가 쉽고 몇 가지 종류의 업데이트로 제한되는 경우에 사용하기 좋다. 더 복잡한 상태 업데이트 로직을 수행하고 싶을 때 유용하다. 참고자료 : udemy react 강의

clean up 함수 예제를 보기 전 디바운싱(Debouncing)에 대해 먼저 알아보자. Debouncing 이란? '연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식' 이다. onChange이벤트를 통해 입력값에 대한 유효성 검사를 하다보면 입력값의 상태를 입력할 때 마다 상태 변경하는 경우가 생긴다. 상태가 변경될 때마다 화면이 재렌더 되거나, 처리로직을 재수행 하는 경우 과부화가 생길 수 있음...! 따라서 각 항목 별 로 이벤트를 관리하지 말고 디바운싱을 하여, 그룹단위로 이벤트를 처리해보자..! 예제) 로그인 시, id/pw입력값에 대한 유효성 검사. [디바운싱 전] const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) ..

Effect (= Side Effect) 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위 (ex. APP내에서 고려되는 모든 사항들 : 브라우저 저장소에 저장된 데이터를 백엔드 서버에 HTTP 요청 보내기, 타이머 설정 및 관리 등) ➡️ 이러한 작업은 특히 렌더링을 차단/지연할 수 있으므로 일반적인 컴포넌트 평가 및 렌더링 주기 외부에서 발생해야 한다. React에서는 Side-Effect 처리를 위해 useEffect()함수를 제공 useEffect() hook useEffect(() => {...}, [dependencies]) 첫번째 인수 : 지정된 종속성이 변경된 경우, 모든 구성 요소 평가 후에 실행해야 하는 함수 두번째 인수 : 이 effcet의 종속성(배열) - ..