useMemo개념- 반복적으로 연산하는 값의 결과를 저장해두고 재사용하게 도와주는 Hook- 해당 연산과 관련된 값(의존성 배열에 넣은 값)이 변경될 때만 연산되며, 이외는 이미 연산된 결과를 재사용user의 변화에 따라 활성 사용자 수를 세야하는데 input 값이 바뀔 때에도 컴포넌트가 리렌더링이 되면서불필요한 호출이 발생(리소스 낭비) 여기서 Input 값의 state는 App에서 관리하고 있고, 해당 App에서 활성 사용자 수를 세는 연산도 있기 때문에리렌더링 발생 때마다, 계속 연산되고 있는 상황 이러한 상황에서 useMemo를 사용하여 연산한 결과를 저장해두고, 저장해둔 값을 사용하여 리소스 낭비를 막아줌dp의 메모이제이션과 동일사용 // 적용 전 // const count = countA..
useEffect 개념1번째 인자: 실행될 함수2번째 인자: 의존성 배열cleanup 함수역할: 해당 컴포넌트가 사라질 때, 컴포넌트 내에서 사용했던 인자들을 정리해주는 함수사용: useEffect 내에 return 문에서 사용 마운트/언마운트 시에 하는 작업마운트 시에 하는 작업들은- props로 받은 값을 컴포넌트의 로컬 상태로 설정- 외부 API 요청- 라이브러리 사용- setInterval을 통한 반복작업 or setTimeout를 통한 작업 예약 언마운트 시에 하는 작업들은- setInterval, setTimeout을 사용하여 등록한 작업들 clear 하기. clearInterval, clearTimeout- 라이브러리, 인스턴스 제거 useEffect의 의존성 배열에 특정 값을 넣게 되면,..
useRef로 특정 DOM 선택하기내용JS를 사용할 때는 특정 DOM을 선택하는 상황에서getElementById, querySelector와 같은 DOM Selector 함수를 사용해서 DOM을 선택했음 리액트를 사용할 때도 가끔 DOM을 직접 선택해야 하는 상황이 발생하는데, ref를 사용함ex) 특정 요소의 크기를 가져오거나, 포커스 설정 하거나, 외부 라이브러리 사용할 때 등 함수형 컴포넌트에서 ref를 사용할 때는 useRef 라는 Hook 함수를 사용함 초기화 버튼을 클릭했을 때, 이름 input에 포커스가 잡히도록 useRef를 사용해서 기능을 구현해보면 다음과 같음import React, { useRef, useState } from "react";function InputSample() ..
스프레드 연산자 - 객체, 배열, 문자열 등 반복 가능한 객체를 개발적인 값으로 분리할 수 있는 ES6에 추가된 문법 - 기존의 객체 or 배열을 독립적으로 복사하기 위해서 concat, split, map 등의 방법을 사용했지만 스프레드 연산자(...)를 이용하여 보다 쉽게 복사가 가능(참조 X 독립 O) - 이 때, 여기서 말하는 복사는 얕은 복사임(원본 배열 내에 객체가 있는 경우 참조가 되며, 배열 내의 객체 값을 변경할 경우 원본 배열도 동일하게 변경된다.) 그대로 할당(배열 참조) const arr1 = [1, 2, 3]; const newArr = arr2; newArr.push(4); console.log(arr1); // [1, 2, 3, 4]; console.log(newArr); //..
고민 - 아래의 코드는 버튼(+ or -)을 클릭할 때 배열 내 객체의 votes가 증감되는 로직이다. - products를 얕은 복사하여 버튼(+ or -)에 따라 증감이 이루어지기 때문에 원본(products)에 영향을 주게 된다. - 이 상황에서 setProducts를 하지 않아도 될까? 에 대해 고민해 보았다. const [products, setProducts] = useState([ { name: "Oranges", votes: 0 }, { name: "Bananas", votes: 0 }, ]); const onVote = (dir, index) => { const newProducts = [...products]; newProducts[index].votes += dir === "plus"..
- JSX 규칙 상, 하나의 태그로 묶어서 리턴을 해야하는 상황이 발생함(이때, React.fragment를 사용) - 컴포넌트에서 2개 이상의 요소를 리턴하고 싶을 때 사용 - DOM에 별도의 노드를 추가하지 않음(strict mode와 동일) - React v16에 추가된 기능 사용 방법 1. 사용 - 명시적으로 이렇게 작성하는 것이 가장 바람직함 hi nice to meet U 2. 축약문 사용 - 작성하기 간편해서 많이 이용하는 방법 hi nice to meet U 3. 사용 - 명확하지 않으며 DOM 생성되므로 피해야할 방법 hi nice to meet U
문제 FocusableInput 컴포넌트의 첫 번째 렌더링 때, props로 넘겨 받은 shouldFocus가 true라면 FocusableInput 컴포넌트의 input 요소가 포커스를 받도록 설정해야 했음 해결 useRef를 통해 input 요소를 참조하고 useEffect의 의존성 배열을 빈 배열로 만들어, 첫 번째 렌더링 시에만 shoudFocus가 true일 때 포커스를 만들게 했음 코드 import React, {useEffect, useRef} from 'react'; import { createRoot } from 'react-dom/client'; const FocusableInput = ({shouldFocus}) => { const inputRef = useRef(null); useE..
e.stopPropagation() - 현재 이벤트가 이벤트 버블링 또는 캡처링 과정을 통해 상위 또는 하위 요소로 전파되는 것을 막아줌 - 사용 예시: 버튼을 클릭했을 때 그 버튼을 포함하는 상위 요소에서도 클릭 이벤트가 처리되는 것을 막고 싶을 때 사용 e.preventDefault() - 이벤트의 기본 동작을 취소할 때 사용 - 사용 예시: 태그의 클릭 이벤트는 URL로의 이동을 하는 기본 동작을 가지고, 폼 제출 이벤트는 데이터 전송을 기본 동작으로 가지고 있는데, 이러한 기본 동작을 막아줌 적용 - 해당 아이템이 '완료' 상태일 때 클릭 이벤트 전파 방지를 위해 event.stopPropagation(); 사용 const TodoList = ({ items, onListClick, onItemC..
