본문 바로가기

IT/React2

[React] Axios 통신을 위한 Custom Hook 사용 Custom Hook이란?정규 함수와 같지만 안에 상태를 포함할 수 있는 로직 함수기존의 React Hook과 다른 Hook을 동시에 사용할 수 있다.React에서 useState or useEffect와 같은 Hook을 사용할 경우React 함수 컴포넌트에서만 호출이 가능하다.즉 일반적인 JavaScript 함수에서 호출이 불가능하다. Custom Hook이 필요한 이유위에서 본 것처럼 React Hook을 사용하기 위해서는 조건이 있다.React 함수 컴포넌트에서만 호출이 가능하다는 조건이다.따라서 일반적인 JavaScript 함수에서는 호출이 불가능하다.const MainComponent = () => { const [number,setNumber] = useState(0); return.. 2024. 8. 7.
[React] useContext 상태 갱신 문제 UseContext의 사용 이유React에서 데이터는 부모에서 자식에게 props를 통해 전달된다.그러나 application 전체에 데이터를 전달해야 줘야 할 경우 props를 사용한다면props chain이 너무 길어지는 문제점이 발생한다.따라서 useContext는 이를 해결하기 위한 Hook으로 저장소 같은 역할을 한다.따라서 명시적으로 props를 전달하지 않고도 전역 데이터를 사용할 수 있다.useContext를 통해 로그인한 유저의 정보를 저장하거나application에서 사용하는 전역 변수들을 저장소로서 저장하고 데이터 조회 및 변경도 가능하다.import React from "react";const loginContext = React.createContext({ id : 0, .. 2024. 8. 7.

loading