rexondex's blog

Next.js란 무엇인가요? Next.js는 풀스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크입니다.React Components를 사용하여 사용자 인터페이스를 빌드하고 Next.js를 사용하여 추가 기능과 최적화를 구현합니다. 후드 아래에서 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 툴링을 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 들이는 대신 애플리케이션 빌드에 집중할 수 있습니다. 개인 개발자이든 대규모 팀에 속한 사람이든 Next.js는 대화형, 동적인, 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다. https://nextjs.org/docs Introduction | Next.jsWelcome to the Next.js Docum..

리액트에서 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각입니다.컴포넌트를 사용하면 복잡한 UI를 작은 조각으로 나누어 관리하고 재사용할 수 있습니다. 리액트 컴포넌트는 크게 함수형 컴포넌트와 클래스 컴포넌트 두 가지 유형으로 나뉩니다.함수형 컴포넌트 (Functional Components) 정의 :JavaScript 함수로 작성되며, props를 입력받아 JSX를 반환합니다. ES6 화살표 함수를 사용하여 간결하게 작성할 수 있습니다.특징 :상태(state)와 생명주기 메서드를 직접 사용할 수 없었지만, React Hooks의 등장으로 이러한 제약이 사라졌습니다. 클래스 컴포넌트보다 코드가 간결하고 가독성이 좋습니다. 성능 면에서 클래스 컴포넌트보다 약간 우수합니다.function We..

리액트에서 배열을 렌더링할 때 key를 설정해야 하는 이유 ? 리액트가 어떤 항목이 변경, 추가 또는 삭제되었는지 식별하고 가상 DOM을 효율적으로 업데이트하기 위해서입니다. key를 사용하면 리액트는 각 항목의 고유한 식별자를 알 수 있으므로 변경된 부분만 업데이트하고 나머지는 그대로 유지할 수 있습니다. ■ key 설정의 필요성- 효율적인 업데이트 : key가 없으면 리액트는 배열의 순서에 의존하여 모든 요소를 업데이트해야 합니다. key를 사용하면 변경된 요소만 업데이트하여 성능을 향상시킬 수 있습니다.- 예측 가능한 동작 : key가 없으면 배열의 요소가 변경될 때 예측할 수 없는 방식으로 컴포넌트가 업데이트될 수 있습니다. key를 사용하면 리액트가 올바른 항목을 식별하고 정확하게 업데이트할 수..

리액트 컴포넌트 생명주기는 컴포넌트가 생성되고 화면에 렌더링되어 업데이트되고 제거될 때까지의 일련의 과정을 의미합니다. 리액트 컴포넌트는 다음과 같은 세 가지 주요 생명주기 단계를 거칩니다. 1. 마운팅(Mounting): 컴포넌트 생성 및 렌더링constructor(): 컴포넌트가 생성될 때 호출됩니다. 초기 state 설정 및 메서드 바인딩에 사용됩니다.static getDerivedStateFromProps(): props에 따라 state를 업데이트할 때 사용됩니다.render(): 컴포넌트를 렌더링하는 메서드입니다. JSX를 반환합니다.componentDidMount(): 컴포넌트가 DOM에 삽입된 후 호출됩니다. 외부 API 호출, 이벤트 리스너 설정 등에 사용됩니다.2. 업데이트(Updati..

useCallback에 대해 스스로 내용을 정리해 보았습니다.useCallback ? useCallback의 간단한 정의는`리렌더링 간에 함수 정의를 캐싱해 주는 React Hook` 입니다.const cachedFn = useCallback(fn, dependencies)[ 레퍼런스 ] 리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출합니다import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + pro..

useMemo에 대해 스스로 내용을 정리해 보았습니다.useMemo ? useMemo의 가장 간단한 정의는`재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 Reack Hook` 입니다.const cachedValue = useMemo(calculateValue, dependencies)[ 레퍼런스 ] 컴포넌트의 최상위 레벨에 있는 `useMemo`를 호출하여 재렌더링 사이의 계산을 캐싱합니다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} - 매개변수calcula..