dev-hpk 님의 블로그

React는 컴포넌트의 상태를 관리하기 위해 여러 가지 훅을 제공합니다. 그중 하나가 useReducer 훅으로, 상태를 복잡하게 업데이트할 필요가 있을 때 매우 유용한 훅입니다. useReducer는 상태를 처리하는 로직이 많거나, 여러 가지 상태를 관리해야 할 때, 특히 Redux와 같은 상태 관리 패턴과 유사한 방식으로 상태를 관리할 수 있도록 해줍니다.   목차 1. useReducer란? 2. useReducer와 useState의 차이점 3. useReducer 사용법 4. 복잡한 상태 관리에서 useReducer 사용하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useReducer란? useReducer 훅은 상태(state)와 액션(action)을 기반으로 상태를..

React에서 컴포넌트의 상태 관리와 DOM 조작은 매우 중요합니다. 일반적으로 useState를 통해 상태를 관리하지만, 컴포넌트의 리렌더링과 관계없이 값을 유지하고 싶거나, 특정 DOM 요소에 직접 접근하고 싶을 때는 useRef를 사용하게 됩니다.   목차 1. useRef란? 2. useRef vs useState: 언제 사용할까? 3. useRef의 사용 사례 4. useRef 사용 시 주의할 점 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useRef란?useRef는 React에서 제공하는 Hook 중 하나로, 다음과 같은 기능을 제공합니다. 값 저장: 컴포넌트의 라이프사이클 동안 유지되며, 값이 변경되더라도 리렌더링을 발생시키지 않습니다.DOM 요소 접근: 특정 DOM..

React는 컴포넌트 기반의 UI 라이브러리로, 데이터를 기반으로 동적으로 UI를 렌더링 하는 경우가 많습니다. 특히, 배열 데이터를 기반으로 여러 컴포넌트를 반복해서 렌더링 할 때 배열의 각 항목을 고유하게 식별할 필요가 있습니다. 이때 key prop을 사용하여 React가 각 항목을 효율적으로 처리하고 성능을 최적화할 수 있도록 도와줍니다.  목차 1. key Prop이란? 2. key Prop의 필요성 3. key Prop 사용 방법 4. key의 중요성추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. key Prop이란?key는 React가 리스트를 렌더링할 때 각 항목을 구분할 수 있도록 도와주는 고유한 값입니다. React는 DOM 업데이트 과정에서 변경된 부분만 효율적으로..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다.  순위당첨 내용16개 번호가 일치25개 번호가 일치34개 번호가 일치43개 번호가 일치52개 번호가 일치6(낙첨)그 외  로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최..

React Router는 클라이언트 측 라우팅을 쉽게 구현할 수 있는 도구로, URL을 기반으로 경로를 관리하면서 다양한 데이터(파라미터, 쿼리 등)를 전달하고 처리하는데 매우 유용합니다. 특히, URL을 통해 데이터를 전달할 수 있는 동적 파라미터와 쿼리 스트링은 페이지 간 데이터 전달과 필터링 기능을 구현하는데 필수적입니다.   목차   1. useParams - 동적 URL 파라미터 사용하기 2. useSearchParams - 쿼리 스트링 사용하기 3. 파라미터와 쿼리 스트링을 함께 사용하기 4. navigate - 쿼리 스트링 동적으로 변경하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useParams - 동적 URL 파라미터 사용하기URL 파라미터는 경로의 일부로 특..

React Router는 SPA(Single Page Application)에서 클라이언트 측 라우팅을 구현하기 위한 표준 라이브러리입니다. React Router를 사용하면 페이지 간 전환을 빠르고 부드럽게 처리할 수 있어 사용자 경험이 향상됩니다.   목차 1. Router 설치 2. Router 기본 개념 3. 중첩 라우팅 (Nested Routing)마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Router 설치 React Router를 사용하려면 다음 명령어로 react-router-dom 패키지를 설치해야 합니다npm install react-router-dom 2. Router 기본 개념2.1. BrowserRouter BrowserRouter는 History API를..

React에서 useContext Hook은 컴포넌트 트리의 깊은 곳에 있는 컴포넌트에 데이터를 직접 전달할 수 있게 해 줍니다. React에서 context를 사용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있어 편리합니다.   Context - 컴포넌트 간 데이터 공유의 효율적인 방법 목차 1. Context란? 2. useContext 사용법 3. useContext로 불필요한 Props 드릴링 제거 4. useContext로 글로벌 상태 관리 5. Context Api를 언제 사용할까?마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Context란?Context는 React 애플리케이션에서 전역 데이터를 관리하고 공유할 수 있는 ..

React에서 useCallback은 성능 최적화를 위한 훅입니다. 특히 컴포넌트가 재렌더링될 때 불필요하게 함수를 다시 생성하는 문제를 해결해 줍니다. 컴포넌트가 리렌더링 될 때마다 함수는 새로 생성되지만, useCallback은 이전에 생성된 함수를 메모이제이션하여 동일한 의존성 배열을 가지면 재사용합니다.  목차 1. useCallback 사용법 2. useCallback 사용 예시 3. 의존성 관리의 중요성 마무리 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다.1. useCallback 사용법React 컴포넌트가 리렌더링 될 때마다 모든 함수는 기본적으로 새로 생성됩니다. 이는 불필요한 자원 낭비를 초래할 수 있습니다. useCallback은 함수와 의존성 배열을 인자로 받아, 의존성 배..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제 두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다.   제한사항 두 수는 1이상 1000000이하의 자연수입니다.입출력 예nmreturn312[3, 12]25[1, 10] 입출력 예 설명입출력 예 #1위의 설명과 같습니다.입출력 예 #2자연수 2와 ..

React에서는 사용자 입력을 처리하는 두 가지 주요 방식이 있습니다: 제어 컴포넌트와 비제어 컴포넌트 이 두 방식은 각기 다른 상황에서 유용하며, 각각의 장단점을 이해하는 것은 React 애플리케이션을 효과적으로 개발하는 데 중요한 요소입니다.   목차 1. 제어 컴포넌트란? 2. 비제어 컴포넌트란? 3. 제어 컴포넌트와 비제어 컴포넌트, 어떻게 사용할까? 4. 입력하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 제어 컴포넌트 (Controlled Components)제어 컴포넌트는 React state(상태)를 사용하여 컴포넌트의 값을 제어합니다. 즉, 컴포넌트의 입력 값은 React state(상태)에 의해 관리되며, 사용자의 입력이 있을 때마다 상태를 업데이트하여 UI를 갱신..