IT/React11 React - Hook (State, Effect) React 에서 Hook 이란?함수형 컴포넌트에서 사용되는 state와 관련된 기술들을 모아서 일컫는 말임 대표적으로 useEffect() , useState() 가 있음 Hook은 함수컴포넌트에서 React State 와 생명주기 기능을 연동 할수 있게 해주는 함수임Hook 은 class 안에서 동작하지 않음 단 class 없이 React 를 사용할수 있게 해주는 것임 React Hooks에서 구독(subscription)과 클린업(cleanup)은 부수 효과(side effect) 관리를 위한 핵심 개념임 구독(subsciption) 이란?외부 데이터 소스 연결 : WebSocket, 실시간 DB, 이벤트 리스너 등 지속적인 연결이 필요한 경우장기 실행 작업 관리: 타이머(setInterval), 애.. 2025. 2. 2. React - Side Effect Side Effect 란?함수 내에서 구현한것이 함수 외부에 영향을 끼치는 경우 해당하는 함수는 Side Effect 가 있다고 이야기 함React 에서는 컴포넌트내에서 fetch 를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 을 직접 조작할때 Side Effect 가 발생했다고 말함 순수함수란? ( Pure Function )오직 함수의 입력만이 함수의 결과에 영향을 주는 함수함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 주는것은 순수함수라고 부를수 없음순수 함수는 입력으로 전달된 값을 수정하지 않음순수함수에는 Side Effect 가 일어나지 않음즉 순수함수의 특징은 어떠한 전달 인자가 주어지는 경우 항상 똑같은 값이 리턴됨을 보장함(예측 가능한 함수임) 함수의 불변성( Immuta.. 2025. 2. 1. React 4일차 [[React]]Effect HookSide EffectReact 컴포넌트에서의 Side Effect타이머 사용 (setTimeout)데이터 가져오기 (fetch API, localStorage)Effect Hook 기본useEffectuseEffect >> side Effect 사용할수 있게 함실행할떄 파라미터로 함수를 받음랜더링 이후에 무조건 useEffect 실행이 됨컴포넌트 생성 후 처음 화면에 렌더링(표시)컴포넌트에 새로운 props가 전달되며 렌더링컴포넌트에 상태(state)가 바뀌며 렌더링 종속성 배열에 들어 있는 부분이 바뀌면 실행됨side Effect 해야 할때 사용함순수함수가 아닌 side Effect 가 일어나는건 useEffect 2025. 1. 7. React Query [[React]]React Query 란?데이터 패치, 동기화, 캐싱 및 업데이트와 관련된 복잡성을 추상화하여 간단하게 처리 할수 있도록 도와주는 라이브러리임React Query 이용하여 전역 상태를 관리할수 있음QueryReact Query에서 특정 데이터 요청의 상태와 데이터를 나타내는 객체임쿼리 키(query key)에 따라 고유하게 식별되며, QueryClient의 캐시에 저장됨Query에 대한 모든 정보 (데이터, 상태 필드 또는 마지막으로 언제 패치가 이루어졌는지와 같은 메타 정보)를 포함할 뿐만 아니라, Query 함수를 실행하며 재시도, 취소, 중복 제거 로직도 포함하고 있음또한 불가능한 상태에 빠지지 않도록 내부 상태 기계를 가지고 있음예를 들어, 이미 패치 중인 상황에서 Query 함수.. 2025. 1. 7. 이전 1 2 3 다음
