React

State 만드는법Props 전송하는 법컴포넌트 만드는 법UI 만드는 Step

최근에 작성한 리액트 코드 중에서 따봉(좋아요) 기능을 구현하는 과정에서 상태 업데이트에 문제가 발생했습니다. 해당 문제와 해결 과정을 다음과 같이 정리하겠습니다.

useTitle : react document의 title을 몇개의 hooks과 함께 바꾸는 것useInput : Input을 업데이트 하고 initialValue을 받음usePageLeave : 유저가 page를 벗어나는 시점을 발견하고 함수 실행useClick :

Hook이 준수해야 할 두가지 규칙1) 최상위(at the Top Level)에서만 Hook을 호출해야 한다.반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출 하면 안된다.대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the t

클릭을 했을때 log가 찍히는 App.js에선을 만들고자 할 때useClick.js 컴포넌트는 밑의 코드와 구성했을 시src\\component\\useClick.js Line 7:21: React Hook "useRef" is called conditionally

React.memo란?React.memo는 메모이제이션된 함수 컴포넌트를 생성하는 고차 컴포넌트 메모이제이션은 이전에 계산된 값을 저장해 두었다가 같은 계산이 필요할 때 이전의 결과를 사용하는 최적화 기법이다. React.memo를 사용하면 컴포넌트가 같은 props로

• 리액트를 사용하는 이유: 최소 단위의 렌더링을 위해, 새로운 정보를 자동적으로 refresh 해준 다는 점에서 편리• useState(): 변수, 변수를 제어하는 함수로 구성되며 변하는 값을 제어, 해당 부분의 리렌더링을 위함• props: 태그의 속성 값을 함수의

이번 포스팅에서는 전자정부프레임워크에서 제공한 샘플을 활용하여 웹 애플리케이션에서 자주 사용되는 체크박스 기능을 구현하는 방법에 대해 알아보겠습니다. 체크박스 기능구현을 위한 세부코드 작성과 의의를 알아보도록 하겠습니다.Back : 오라클, Dbeaver, eGovFr

React 애플리케이션에서 페이지네이션과 검색 기능을 연동하는 방법을 알아보겠습니다. 이를 통해 사용자가 검색 결과를 페이지별로 탐색할 수 있게 됩니다.우선 간단한 이미지 관리 애플리케이션을 가정합니다. 이 애플리케이션에는 이미지 목록이 있고, 사용자는 페이지네이션을

React를 사용하여 동적으로 테이블의 헤더와 데이터를 렌더링하는 방법을 알아보겠습니다. 예를 들어, 서버에서 받아온 데이터를 테이블로 표시할 때 헤더 및 데이터의 형태가 동적으로 변경될 수 있습니다. 이를 위해 React의 컴포넌트를 사용하여 유연하게 테이블을 구성

사용자가 선택할 수 있는 옵션을 동적으로 관리해야 할 때가 있습니다. 예를 들어, 이미지 관리 페이지에서 사용자가 이미지를 특정 구분에 따라 필터링할 수 있는 드롭다운 메뉴를 만들어야 할 수 있습니다. 이처럼 React 컴포넌트를 사용하여 Select 옵션 기능을 구현

실시간 업로드 진행 상황을 표시하는 파일 업로드 컴포넌트 만들기 파일 업로드는 현대 웹 애플리케이션에서 필수적인 기능 중 하나입니다. 이번 글에서는 React를 사용하여 실시간 업로드 진행 상황을 표시하는 파일 업로드 컴포넌트를 만들어보겠습니다. 스타일링과 함께 각

이번 글에서는 JavaScript의 맵 함수를 사용하여 예시 데이터를 변환하고, React 컴포넌트를 통해 시각적으로 표현하는 방법을 알아보겠습니다. 간단한 예시를 통해 데이터를 다루는 과정을 자세히 설명할 것입니다.예시 데이터는 팀 구성원의 정보를 담은 JSON 배열

SWR은 Next.js 팀에서 만든 데이터 훅 라이브러리로, 간단하게 데이터를 가져오고 캐싱하여 최신 상태를 유지할 수 있습니다. 이번 글에서는 SWR에서 주요한 기능인 revalidate와 mutate에 대해 알아보겠습니다. 이들은 데이터를 다시 가져오고 업데이트할

👌 Easy to use: React Flow already comes with many of the features you want out of the box. Dragging nodes around, zooming and panning, selecting mult

React 애플리케이션을 개발하다보면 성능 최적화는 중요한 과제 중 하나입니다. 이를 위해 React의 핵심 개념 중 하나인 클로저와 useCallback 훅을 적절히 활용하는 것이 필요합니다. 이번 포스트에서는 이러한 개념들을 자세히 살펴보겠습니다.클로저는 JavaS

React로 사고하기 목업으로 시작해서 총 5단계로 React적으로 사고하는 것을 알아보겠습니다. 목업으로 시작하기 목업은 다음과 같습니다. 1단계: UI를 컴포넌트 계층 구조로 나누기 우리의 첫 번째 단계는 UI를 컴포넌트 계층 구조로 분해하는 것입니다.

React Flowhttps://flows.vercel.app/how-to-react/React Folder Structure in 5 Steps 2022https://www.robinwieruch.de/react-folder-structure/

작성중.

React는 Facebook에서 개발한 인기 있는 프런트엔드 라이브러리로, 웹 애플리케이션의 사용자 인터페이스를 구축하는 데 널리 사용됩니다. React의 핵심 개념은 컴포넌트 기반 개발로, 재사용 가능한 UI 컴포넌트를 만들어 애플리케이션을 구성합니다.React의 초

React에서 폼을 다룰 때, 상태 관리와 유효성 검사는 중요한 부분입니다. React Hook Form은 이러한 작업을 간편하게 처리할 수 있도록 도와주는 라이브러리입니다. 이 글에서는 React Hook Form의 기본 개념과 사용 방법을 알아보겠습니다.먼저, 프로

useReducer는 React의 내장 Hook으로, 복잡한 상태 로직을 관리하는 데 사용됩니다. 이는 Redux의 핵심 개념인 리듀서(reducer)에서 영감을 받았습니다.리듀서는 다음과 같은 형태를 가진 순수 함수입니다:여기서:state는 현재 상태입니다.actio

useReducer와 useContext를 함께 사용하면 강력한 전역 상태 관리 시스템을 구축할 수 있습니다. 이 조합은 특히 중간 규모의 애플리케이션에서 Redux와 같은 외부 라이브러리 없이도 효과적인 전역 상태 관리를 가능하게 합니다.전역 상태 관리: useCon