1. JSXJSX는 JavaScript XML의 줄임말이야. HTML과 비슷하게 생겼지만 JavaScript 코드 안에서 사용되는 특별한 문법이야.React 컴포넌트에서 UI를 그리는 데 사용돼!예시:function Hello() { return Hello, React!;} 위 코드는 HTML처럼 보이지만 실제로는 JavaScript야. JSX 덕분에 UI를 선언적으로 작성할 수 있어. 그리고 컴파일되면 JavaScript 코드로 변환돼!  2. StateState는 컴포넌트의 "내부 데이터"를 말해. 컴포넌트가 가지고 있는 데이터를 관리하고, 그 데이터가 바뀌면 UI가 자동으로 업데이트돼.예시:import React, { useState } from 'react';function Counter() {..

const WrapTextInSpans = ({ text }) => { return ( {text.split('').map((char, index) => ( {char} ))} ); };

보호글 입니다.

보호글 입니다.

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에서 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와 같..

경로이름 members /my/health라는 경로를 가진 애들 한테는 active를 부여한다 members/my/health/two 도 active가 붙는다

const navigate = useNavigate(); let location = useLocation(); useEffect(() => { if(location.pathname === '/') { navigate('main'); } }, [])

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

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

return( 사이트 이용약관 )

Warning: Expected `onClick` listener to be a function, instead got a value of `object` type. onClick = {함수} (X) onClick = {()=>{함수}} (O)