React

🌱 React 컴포넌트의 생명주기 ( Life Cycle ) > 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다. > 컴포넌트는 생성(mount) → 업데이트(update) → 제거(unmount)의 생명주기를 같는다. class 컴포넌트 생명주

Main 페이지에서 동물 전체 목록 표시Detail 페이지에서 특정 동물에 대한 상세 정보 표시Search 페이지로 이동할 수 있는 검색 input 과 button 생성Search 페이지에서 검색한 동물에 대한 목록 표시📍 \[react-router] 를 사용하기

useState는 React의 훅(Hook) 중 하나로, 컴포넌트에서 상태(state)를 관리할 때 사용컴포넌트가 렌더링될 때마다 상태를 유지할 수 있도록 도와줍니다.동일한 컴포넌트가 여러개라도 state는 각각 관리된다.📍 기본 문법state → 현재 상태 값 (상

useEffect 란 ? useEffect는 React의 Hook 중 하나로, 컴포넌트의 라이프사이클 동안 특정 로직을 실행할 때 사용됩니다. 렌더링 이후 실행되는 코드 비동기 작업 (API 호출, 이벤트 리스너 등록, 타이머 설정 등)에 활용 의존성 배열을 통해 실

업로드중..useRef는 React의 훅(Hook) 중 하나로, DOM 요소에 접근하거나, 렌더링과 관계없이 값을 저장하고 유지하는 데 사용리렌더링을 발생시키지 않고 특정 값을 유지하고 싶을 때 유용합니다.➡️ 즉, 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운

       : 웹 프론트엔드 개발의 가장 기본적인 언어웹 페이지 스타일링의 근본초보자도 배우기 쉽다별도의 설치 과정 / 설정이 필요 없다브라우저가 직접 해석하므로, 처리 과정 없이 빠르게 로드된다코드를 깔끔하게 정리하기 어렵다중복되는 코드를 재사용하기 어렵다유지보수가

React와 함께 사용되는 CSS-in-JS 라이브러리로, 컴포넌트 단위로 스타일을 작성할 수 있도록 도와줍니다.CSS-in-JS란 ?... JavaScript 코드 안에서 직접 CSS를 작성하는 방식. 즉, CSS 파일이 따로 존재하지 않아도 됨동적인 스타일 적용과

✨ Tailwind 란? 가장 대표적인 Utility-First CSS 프레임워크 이미 작성된 CSS 코드를 클래스명으로 조합하여 스타일을 직접 구성하는 방식을 사용 ⚙️ 기본 설치 및 설정 🖇️ [ 사이트_참고 ] https://tailwindcss.com/d

애플리케이션 내에서 여러 컴포넌트가 공유해야 하는 상태(state)를 중앙에서 한곳에 모아 관리하는 방법을 의미React에서는 기본적으로 useState나 useReducer를 사용하여 개별 컴포넌트 내에서 상태를 관리하지만, 여러 컴포넌트가 동일한 데이터를 필요로 할

Context API createContext 로 전역 상태 만들기! - 전역상태 저장소 Provider 로 전역 상태 연결해 주기! useContext 로 전역 상태 가져와 주기! Context API 를 사용 할 때는 Context API 를 담아둘 별도의 폴더

Redux 란? 가장 대표적이고 근본인 전역 상태 관리 라이브러리 상태 관리 라이브러리 중 가장 많이 사용 되고 있음 예측 가능한 상태 관리(Predictable State Management) 를 목표로 하며, 애플리케이션의 상태를 한 곳에서 관리하고, 상태 변경이

Redux를 좀 더 쉽게 사용할 수 있도록 만들어진 라이브러리 공식문서에서도 RTK를 사용할 것을 권장 필요한 모듈! npm i @reduxjs/toolkit, react-redux Action / Reducer => createSlice( ) Store => co

React 최적화 함수 React에서 불필요한 렌더링을 방지하고 성능을 최적화하는 방법 : useMemo, useCallback, memo 1️⃣ useMemo() 호출 결과 저장 연산 비용이 큰 계산 결과(값)를 저장하여, 의존성 값이 변경될 때만 재계산 ✔️ 기

react는 기본적으로 클라이언트 사이드 렌더링을 한다 서버에서 일단 비어있는 html 파일을 받아온 다으ㅡㅁ js 코드를 통해서 최종 화면을 그려줌 클라이어트 쪽에서 자바스크립트를 통해서 화면을 완성하기 때ㅜㅁㄴ에 클라이언트가 렌더링의 주체가 된다는 의미 너무 큰

Debouce & Throttle 사용자의 입력이나 이벤트 발생 빈도를 제어하여 성능을 최적화하는 기법 연속적으로 발생하는 함수나 이벤트를 묶어서 처리하는 방식 검색창 자동완성: 사용자가 입력할 때마다 API 요청을 보내면 성능이 저하됨 → Debounce 사용 스크