반응형 react21 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이란? (공부 + 면접 답변용) 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 다음 반응형
