본문 바로가기
반응형

분류 전체보기112

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.
오늘의 소확행 - 빵 고르기 티스토리 챌린지 마지막 날 글은 오늘의 소확행  '빵 고르기'🥖🍞🥐21일 동안 글 쓰는것이 쉽지는 않았지만 그래도 체크 표시를 보니 뿌듯하다 경품에 당첨될지는 모르겠지만 일단 냅다 인증!오전 시간에 빵집에 갔을 때 갓 나온 따끈따끈한 빵이 좋다우리 동네 빵집으로 말하면은 오전 일곱시 반부터 베이글과 아침 메뉴 빵이 나온다담백한 토종효모빵을 구워서 땅콩 버터를 발라먹어도 맛있고 맥모닝 같은 스타일의 햄치즈 오리지널 머핀, 계란과 햄, 치즈가 들어간 토스트도 눈에 들어온다 다음 빵 나오는 시간은 여덟시 반 갓 튀겨진 도넛은 오늘은 안 땡겨서 지나치고 짭짤한 소세지빵 종류도 눈에 들어온다  혼자 먹어야 해서 많이 살 수가 없으니까 (남기는 것 싫음) 고민이 되서 빵집을 빙글뱅글 돌아본다 물론 친구들이랑 .. 2024. 11. 27.
[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.
지갑 탈탈 털린 올해 잘산템 10개 올해를 11장의 사진으로 표현한다면 글에 이어 3번 올해 잘산템 글을 써보려고 한다정리한 순번은 순위와는 상관이 없다 열 가지 아이템 정리! 1번 애플워치Apple 애플워치 SE 2세대, 알루미늄, 40mm, 스타라이트사기 전엔 쓸데없이 돈 쓰는 거 아닐까, 기능에 비해 너무 비싸다 등등 고민이 많았다 로또 당첨됬으면 고민 안했겠지만 현실은 그게 아니니까요 결국은 운동 시작하면서 샀는데 링 채우는 것도 재밌어여줄이나 보호 케이스 바꾸면 시계를 바꾼 느낌도 들어서 아직은 질리지 않았다워치 집에 두고 나오면 운동을 못한다는 말이 무슨 말인지도 알았다 2번은 제주도 애월 협재에서 찾은 조개 반지조개 반지의 디자인이 인어공주스러움여기는 예쁜 반지들이 많은데 단점은 사이즈가 별로 없었다 사장님께 혹시 다른 사이즈.. 2024. 11. 26.
반응형