StudyAndDevelopment

사용 개요 상태를 업데이트 할 때에는 `useState` 를 사용해서 새로운 상태를 설정하여 업데이트 로직은 컴포넌트 내부에서 이루어진다. `useReducer` , Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. import React, { useRef, useReducer, useMemo, useCallback } from 'react'; import CreateUser from 'test/CreateUser'; import UserList from 'test/UserList'; function countActiveUsers(users) { c..

useMemo 성능 최적화를 위해 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 방법이 있다. 밑에 리액트 컴포넌트 안에 2개의 로직이 있다고 가정하면, const count1 = countActiveUsers(users); const count2 = useMemo(() => countActiveUsers(users), [users]); count1은 컴포넌트가 랜더링될 때마다 호출되고, count2는 컴포넌트가 랜더링될 때마다 호출되는 것이 아닌, users가 바뀔 때만 호출된다. 실무 사용법 const MyComponent = ({input}) => { return( React.useMemo(() => { input*2 }, [input]) )} useCallback useMemo 는 ..

useEffect라는 Hook을 사용하면 컴포넌트가 마운트 됐을 때(처음 나타남), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때) 작업을 처리한다. 마운트/언마운트 import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } func..

key의 존재 유무에 따른 업데이트 const array [ 'a', 'b', 'c', 'd'] 위 배열을 다음과 같이 렌더링한다고 가정해보면, array.map(item => {item}) 위 배열의 b와 c 사이에 z를 삽입하게 된다면, 리렌더링을 하게 될 때 b와 c 사이에 새 div 태그를 삽입을 하게 되는 것이 아니다. 기존의 c가 z로 바뀌고, d는 c로 바뀌고 맨 마지막에 d가 새로 삽입된다. (키가 없는 경우)  (키가 있는 경우)  배열이 업데이트 될 때 key가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아닌, 수정되지 않는 기존의 값을 그대로 ..

사용 개요 JS를 사용할 때 특정 DOM을 선택해야 하는 상황(getElementById, querySelector)와 같은 DOM Selector 함수를 사용해서 DOM을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 발생한다. 예를 들어, Chart.js, D3.js와 같은 특정 엘리먼트를 접근을 해야하는 경우 등 다양한 상황이 존재한다. 사용법1 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수를 사용한다. 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { c..