React

const ref = useRef(value)이런식으로 useRef를 선언하면 ref의 객체를 반환해준다. 이 형태는 { current: value } 다. 그리고 이 변수는 언제든 바꿔줄 수 있다. 예를 들어, ref.current = "hello"이 값은 컴포넌트의

useState의 기본 형태 const [원하는변수명, set원하는변수명] = useState(초기값) 소괄호 안에는 문자열, 숫자 null, undefined 중에 들어가게 된다. useState의 형태를 보면 구조분해할당 의 형태로 작성되어 있다. 예제 코드 1

이미 JS안에 내장되어있는 내장객체중, 대표적인 Date() 함수는 class형 객체라고 할 수 있다.const date = new Date() 형식으로 불러오며, 꺼내서 사용하기 위해서는 date.getFullYear() date.getMonth() date.getD

useMemo() 란? useState() 의 방식으로 작성한 컴포넌트에서는 값이 바뀌게 된다면 매번 렌더링이 일어나기 때문에 컴포넌트 최적화에 부족한 부분이 있다. 하지만 useMemo(), useCallback()을 사용하여 컴포넌트 최적화를 가능하게 한다. 여기서는 우선 useMemo()에 대해 알아보자. useMemo의 Memo는 Memoizat...

useEffect 란? 함수형 컴포넌트에서 사용하는 Hook 으로 화면에 첫 렌더링이 일어났을 때, 업데이트 되었을 때, 화면에서 사라질 때, 총 3가지 상황에서 사용할 수 있는 Hook이다. 이는 React 클래스형 컴포넌트의 lifecycle(Mount - Upd

useCallback은 useMemo와 같이 memoization 기능을 활용하는 Hook이다. 즉 자주 쓰이는 값을 캐싱하여 메모리에 저장해 필요한 경우에 다시 불러와서 사용하는 것이다.useMemo와 같은 방식이지만 useCallback은 콜백 함수 그 자체를 Me

useReducer() useReducer 는 언제 사용할까? useState 와 비슷한 기능을 하지만, 여러개의 하위 값들을 포함한 state들을 다루어야 할 때 useReducer를 사용하게 된다면 더욱 간편하게 관리 할 수 있다. useReducer의 작동 원리

React.memo() 는 언제 사용할까? React.memo는 React에서 제공하는 고차 컴포넌트(HOC)이다. 부모 컴포넌트에서 자식 컴포넌트로 props를 보내게 될 때 props check를 통해 props 의 값이 변화가 있는지 확인하게 된다. 변화가 있으면 렌더링이 일어나고 아니라면 기존의 값을 그대로 재사용한다. React.memo() 사...

useTransition의 등장배경 렌더링 과정에서의 Blocking rendering 문제를 해결하기 위해 React18 버전에서 새로운 훅이 등장했다. Blocking rendering이란 한번 렌더링연산이 시작되면 멈출 수 없는 문제이며 처리할 것이 많은 화면을