자바스크립트/React 12

[React] 기본 get 통신

async function getData() { try { const {data} = await api.get(`경로`) // 경로로 get을 해온 후 data에 할당한다 * 비동기 통신 setProductData(data); // data로 불러온 것을 set 해준다 **set은 useState로 따로한다 }catch (e) { // 오류가 생기면 console.error(e); // 콘솔에 오류를 출력한다 } } getData는 의도대로 버튼을 눌러서 onClick 이벤트로 만들거나 useEffect 를 사용해서 불러오기를 한다 useEffect를 사용하면 페이지가 랜딩되면 실행되고 onClick 이벤트를 사용하면 사용자가 이벤트를 발생시키는 타이밍에 해당 함수를 작동시킬 수 있다

[React + NodeJS] get 통신 / 컨트롤러 함수 사용

React에서 API 통신 React에서는 보통 외부 API와 통신하기 위해 fetch, axios 같은 라이브러리를 사용합니다. 예를 들어, axios.get 같은 함수를 사용하여 서버로부터 데이터를 비동기적으로 요청하고 받아옵니다. 이 경우, await 키워드를 사용해 비동기 요청의 결과를 기다립니다. async function fetchData() { const response = await axios.get('https://api.example.com/data'); console.log(response.data); } 여기서 axios.get 메소드는 HTTP GET 요청을 서버에 보내고, 서버로부터의 응답을 기다립니다. Node.js에서 모델과의 연결 Node.js에서, 특히 Express와 같..

[React] navigate(-1);

React에서 navigate(-1) 구문은 사용자의 브라우저 히스토리에서 한 단계 뒤로 이동하는 것을 의미합니다. 이 코드는 react-router 라이브러리의 navigate 함수를 사용하여 구현된 것으로 보입니다. navigate(-1)을 호출하면, 사용자는 현재 페이지에서 이전 페이지로 돌아갑니다. 이는 브라우저의 뒤로 가기 버튼과 유사한 효과를 갖습니다. 여기서 -1은 한 단계 뒤로 이동하라는 의미입니다. 이 코드의 맥락을 보면, od_id 또는 payment_type 값이 없을 때 사용자에게 경고 메시지를 표시한 후, 사용자를 이전 페이지로 돌려보내고 함수 실행을 중단합니다. 이는 사용자가 잘못된 또는 불완전한 페이지에 접근했을 때 안내하고 안전하게 이전 페이지로 돌아가도록 하는 데 사용됩니다.

[React] 의존성 배열 전달(처음 로드 되었을 때 한 번만 실행)

네, 맞습니다. useEffect의 의존성 배열은 React 컴포넌트의 렌더링 동작과 관련된 문법적인 요소입니다. 의존성 배열의 사용 여부와 내용에 따라 useEffect가 언제 실행될지 결정됩니다. 의존성 배열을 전달하지 않았을 때: useEffect에 의존성 배열을 전달하지 않으면, 컴포넌트가 렌더링될 때마다 useEffect 내부의 코드가 실행됩니다. 즉, 컴포넌트의 상태가 변경될 때마다 useEffect가 호출되어 계속 실행됩니다. useEffect(() => { // 컴포넌트가 렌더링될 때마다 실행됩니다. }); // 의존성 배열을 전달하지 않음 2. 빈 의존성 배열을 전달했을 때 ([]): useEffect에 빈 배열 []을 의존성 배열로 전달하면, useEffect 내부의 코드는 컴포넌트가 ..

728x90