반응형 개발 기록/front - react9 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. [react] React 컴포넌트와 Props, State 1. React 컴포넌트란? React 컴포넌트는 UI(사용자 인터페이스)를 나누는 독립적이고 재사용 가능한 단위컴포넌트는 JavaScript 함수 또는 클래스 형태로 정의된다 props를 입력으로 받아 JSX를 반환한다 ※ 알아볼 점 ① 함수형 컴포넌트와 클래스형 컴포넌트 중 어떤 것을 선택해 사용해야 할까요?② Props와 State의 차이는 무엇인지 정리 2. React 컴포넌트의 구성2-1. 함수형 컴포넌트JavaScript 함수로 작성되며 props를 받아 JSX를 반환한다 주로 간단한 UI를 표현하거나 React Hooks와 함께 상태를 관리할 때 사용한다 function Greeting(props) { return Hello, {props.name}!;} 2-2. 클래스형 컴포넌트 ES.. 2024. 11. 25. [JavaScript] 화살표 함수 = (arrow function) => {} react 게시판을 만들면서 화살표 함수를 많이 썼는데, 화살표 함수에 대해서 정리가 필요하다는 생각이 들었다 0. 화살표 함수란?화살표 함수란 무엇일까? = () => { } 위 문법은 화살표 함수(arrow function)을 정의하는 JavaScript 문법이다 ES6(ECMAScript 2015)에서 도입되었으며, 기존 함수 표현식보다 간결하게 작성할 수 있다 1. 기본 문법const 함수명 = (매개변수) => { //함수 내용};간결한 함수 정의 : 기존 function 키워드를 사용한 정의보다 간단함 this의 바인딩 : 화살표 함수는 자신만의 this를 가지지 않고 정의된 렉시컬 컨텍스트(lexical context)**의 this를 사용한다 반환값 생략 가능 : 중괄호를 생략하면 바.. 2024. 11. 20. 이전 1 2 다음 반응형
