분류 전체보기62 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. React - 3일차 State , PropsState변할 수 있는 값컴포넌트 내부에서 변할수 있는 값Props외부로 부터 전달 받은 값변하지 않는 값Props (property)부모 컴포넌트로 부터 전달받은 값객체 형태! -> 어떤 타입의 값도 넣어 전달할수 있기 위해 객체 형태를 가짐Props는 읽기 전용변할수 있게 되면 상위 컴포넌트의 값까지 영향을 미칠수 있게 됨즉 React 의 단방향 하향식 데이터 흐름이 이루어질수 없음props 사용하는 순서하위 컴포넌트에 전달하고자 하는 값과 속성을 정의props = 객체형태이기에 key:value로props 를 이용해서 정의된 값과 속성을 전달전달받은 props 를 렌더링함import { idText } from "typescript";import "./styles.css";c.. 2024. 12. 30. React - 2일차 정리 리액트는 라이브러리 겸 프레임워크 임 라이브러리개발자가 쉽게 개발할수 있도록 미리 만들어진 코드 묶음임필요한 기능만 가져다 쓰면 됨개발자가 라이브러리를 호출하여 사용하는 방식 ( React, Lodash, Axios ) 프레임워크애플리케이션 개발에 필요한 뼈대와 틀을 제공개발자는 프레임워크가 제공하는 규칙과 구조에 따라 코드를 작성프레임워크가 개발자의 코드를 호출하며 동작을 제어 ( Next.js, Vue.js, Spring ) 라이브러리랑 프레임워크의 차이점은?? 라이브러리: 필요한 기능만 선택해서 사용할 수 있어 자유롭습니다.프레임워크: 특정 구조와 규칙에 따라야 하므로 유연성이 적음JSX 문법 JSX(JavaScript XML)에서 return 문법 안에 있는 태그는 HTML 태그가 아니라 Re.. 2024. 12. 20. 이전 1 2 3 4 5 6 7 ··· 16 다음
