전체 글

[ React ] React Hook Form 이란

React Hook Form이란? React 에서 Form 의 validation 을 쉽게 할 수 있도록 도와주는 라이브러리입니다. 전체 폼이 리렌더링 되지 않으면서, 각각의 입력값 변화를 관찰할 수 있기에 성능도 빠르고 의존성도 적습니다. 설치 yarn add react-hook-form 을 통해 설치할 수 있습니다. 간단한 예제를 통해 사용법을 알아보겠습니다. React-Hook-Form import React from "react"; import { useForm } from "react-hook-form"; const App = () => { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => consol..

[ React ] 메모이제이션 (Memoization) 이란

메모이제이션이란? 메모이제이션은 프로그래밍에서 이전에 계산한 값을 메모리에 저장해두고, 다음번에 같은 계산을 다시 하려고 할 때 이전에 계산한 값을 그대로 사용하는 기법을 말합니다. (동적 계획법의 한 종류) 마치 메모를 적어두고, 다음에 같은 계산을 할 때 메모를 보고 계산을 생략하는 것과 같습니다. 메모이제이션을 사용하는 이유 메모이제이션을 사용하는 이유는 동일한 계산을 반복할 때, 이전에 계산한 값을 재사용하기 때문에, 연산 속도를 높일 수 있습니다. N번째 피보나치 수를 구하는 함수를 예로 들어보겠습니다. const fibonacci = (n) => { if (n < 2) return n; return fibonacci(n - 1) + fibonacci(n - 2); }; 이 함수는 n이 1이 될..

[ React ] React Fragment 란

React Fragment 란 React 에서는 여러개의 컴포넌트를 렌더링 할 때, 하나의 부모 컴포넌트로 감싸야 합니다. 하지만, 이런 부모 컴포넌트는 불필요한 DOM 요소를 추가하게 됩니다. 이런 경우에 사용하는 것이 React.Fragment 입니다. import React from "react"; const App = () => { return ( 안녕하세요 리액트 ); }; export default App; 또는 다음과 같이 React.Framgment 를 생략하고 사용할 수 있습니다. import React from "react"; const App = () => { return ( 안녕하세요 리액트 ); }; export default App; 이렇게 사용하면, 불필요한 DOM 요소를 추가..