react21 React에서 Emotion 라이브러리 사용법 (React 디자인) ※ 체크리스트① Emotion 라이브러리의 개념과 CSS-in-JS 방식의 장점을 이해하기② Emotion을 활용해 React 프로젝트에 스타일링을 적용하는 방법을 학습하기③ Emotion의 고급기능(동적 스타일링, 테마, 애니메이션) 익히기 1. Emotion1-1. Emotion 정의Emotion : CSS-in-JS 방식의 강력한 스타일링 라이브러리, JavaScript 코드 내에서 스타일을 작성하고 컴포넌트 별로 적용할 수 있다 1-2. Emotion의 특징1) CSS와 JavaScript의 통합 :스타일과 로직을 한 파일에 작성 가능하다 2) 동적 스타일링 지원 : props와 상태에 따라 스타일 변경이 가능하다 3) 높은 성능 : 스타일이 필요한 시점에만 동적으로 생성과 적용이 가능하다 .. 2024. 12. 30. React Context API 사용법과 Props Drilling 해결(예제 코드 포함) React Query에 이어 React Context API로 상태 관리하는 법을 공부해보려 한다 https://tiny-immj.tistory.com/118 React Query로 서버 상태 관리하기 : 데이터 패칭과 캐싱※ 체크리스트① React Query의 개념과 필요성② React Query의 주요 기능(데이터 패칭, 캐싱, 뮤테이션) 익히기③ React Query를 활용한 서버 상태 관리 방법의 실습 1. React Query 1-1. React Query의 정의 Rtiny-immj.tistory.com ※체크 리스트 ① React Context API를 상태 관리 목적으로 사용하는 방법의 이해하기② Props Drilling 문제를 해결하는 Context API의 기본 개념 학습 ③ Co.. 2024. 12. 27. React에서 Hook이란? useState, useEffect 개념 정리 및 면접 답변 예시 1. Hook에 대한 이해Hook이란 : React 상태 관리, 생명주기 관리, 컨텍스트 접근 등의 작업을 돕는 특별한 함수이다▶ Function과 Feature 구분하기Function (함수) : 특정 작업을 수행하는 코드 블록. Feature (기능) : 함수보다 더 넓은 개념으로, 특정 목표를 달성하기 위해 제공되는 도구나 서비스이다. Hook은 “함수형 컴포넌트에서 상태와 생명주기 관리를 가능하게 해주는 기능” 으로 볼 수 있다▶ Hook의 역할과 기능을 이해하는 방법React에서 Hook은 단순한 함수 이상의 의미를 가지고 있으며, 개발자에게 특정 기능을 제공한다▶ React가 제공하는 도구로서의 기능React Hook은 함수형 컴포넌트에서도 클래스 컴포넌트처럼 상태 관리나 생명주기 기능을 사용.. 2024. 12. 18. React Query 사용법 - 데이터 패칭과 캐싱, 장단점 ※ 체크리스트① React Query의 개념과 필요성② React Query의 주요 기능(데이터 패칭, 캐싱, 뮤테이션) 익히기③ React Query를 활용한 서버 상태 관리 방법의 실습 1. React Query 1-1. React Query의 정의 React 애플리케이션에서 서버 상태를 관리하고 데이터 패칭과 캐싱을 간단하게 만들어주는 라이브러리 ☞ 서버 상태(server state) 관리에 특화된 라이브러리 1-2. React Query 주요 특징 ① 데이터 동기화 : React Query가 클라이언트 상태와 서버 상태를 동기화하는 능력 ● React Query는 자동으로 데이터의 **신선도(freshness)**를 추적하고 필요에 따라 백그라운드에서 데이터를 다시 가져와 UI를 업데이트한다.. 2024. 12. 17. [React] 함수형 컴포넌트 ※체크 리스트① 함수형 컴포넌트의 개념과 특징, 이해② 함수형 컴포넌트를 사용해 React 애플리케이션을 작성하기③ useState와 useEffect를 활용해 동적인 UI 구현하기 1. React의 함수형 컴포넌트1-1. 정의JavaScript 함수로 정의되는 React 컴포넌트클래스형 컴포넌트와 달리 React의 Component를 상속받지 않으며 단순한 함수로 동작한다 1-2. 특징① 간결함 : 구조가 간단하고 코드 작성이 쉽다 ② 무상태(Stateless) : 초기에는 상태를 관리하지 않았으나, React Hooks 도입 이후 상태와 생명주기를 관리할 수 있게 됬다③ 성능 최적화 : 클래스형 컴포넌트보다 메모리 사용량이 적고 렌더링 속도가 빠르다 1-3. 함수형 컴포넌트와 클래스형 컴포넌.. 2024. 11. 27. [React] React 컴포넌트 생명주기, 생명주기 메소드 ※ 체크 리스트 ① React 컴포넌트의 생명주기와 각 단계의 특징을 이해하기 ② 클래스형 컴포넌트의 생명주기 메소드(Lifecycle Method)를 학습하기③ 함수형 컴포넌트에서 생명주기를 관리하는 방법을 이해하기 1. React 컴포넌트 생명주기(Lifecycle)컴포넌트가 생성되고 업데이트되며, 제거되는 과정을 단계별로 설명하는 것을 말한다 생명주기 메소드는 컴포넌트의 특정 시점에서 실행되는 메소드를 말한다 생성 → 업데이트 → 소멸의 과정 1-1. 생명주기 단계의 상태1) 마운드(Mount)● 상태(Phase)를 나타냄 ● React 컴포넌트가 생성되어 처음 DOM에 추가되는 과정과 그 시점 전 후의 상태를 통칭함 ● 예시) 컴포넌트가 Mount 되었다 ☞ 컴포넌트가 이미 DOM에 렌더링.. 2024. 11. 26. 이전 1 2 3 4 다음
