728x90 반응형 코딩애플170 [JS/리액트] Ajax 한 눈에 보기 ( jquery / axios 의 공통점과 차이점) AJAX요청 JS - jQuery 로 요청$.get('https://codingapple1.github.io/hello.txt').done(function(){ });리액트 - axios 로 요청 axios.get("https://codingapple1.github.io/shop/data2.json").then(function(){ });axios.get("https://codingapple1.github.io/shop/data2.json").then(() => { });jQuery의 $.get와 Axios의 axios.get의 공통점공통점 >.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터(data - 작명 자유롭게) 하나 만들기$.get('https://codingapple1.github.. 2024. 5. 28. [리액트] ajax(get/post), fetch ajax 사용하기AJAX로 GET/POST 요청서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능사용 전 준비 >>button 생성 {/* 메인페이지 */} {/* 맵 함수 사용 */} {shoes.map((a, i) => { // 컴포넌트 사용 return ; })} {/* ajax 버튼 생성 */} .. 2024. 5. 28. [리액트] Lifecycle / useEffect(훅) / clean up function Lifecycle- 컴포넌트 인생주기- 컴포넌트 인생 중간중간에 간섭 1. 생성 (mount)2. 재렌더링(update)3. 삭제 (unmount)간섭 방법 >>= 갈고리(훅) 달아서 간섭 갈고리 다는 법(구버전)class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount(){ //Detail2 컴포넌트가 삭제되기전에 실행할 코드 }} 갈고리 다는 법(요즘 버전)- useEffect 함수 useEffect 함수 사용 방법 - import.. 2024. 5. 27. [리액트] 외부 페이지 데이터바인딩 / URL 파라미터 문법 / useParams() 상세페이지(Detatil.js) 에 상품명 넣기 상품명 - shoes state = function App (App.js) 에 존재. 상세페이지(Detatil.js) 에 상품명 넣기.= props 사용// Detail.jsfunction Detail(props) { return ( 상품명 상품설명 120000원 주문하기 );}export default Detail;상품명 데이터 바인딩해주기.///detail 접속시 html 이쁜거 보여달라function Detail(props) { return ( .. 2024. 5. 27. [리액트] 외부 파일 컴포넌트 넣기 / useNavigate() / nested routes / Outlet detail 접속시 보여주고 싶은 html 보여주기 - 다른파일로 뺀 다음 거기서 컴포넌트를 만들어서 넣기. {/* 디테일 페이지 */} 상세페이지임} />저기 element 속성 부분에 컴포넌트 예정.= element 속성 부분= element={ }컴포넌트 생성- 함수쓰고 return 문 써주기.///detail 접속시 html 이쁜거 보여달라function Detail() { return ( 상품명 상품설명 120000원 주문하기 );}export default Detail;- Detail.js 파일 sr.. 2024. 5. 26. 리액트에서 탭 UI 만들기 보호되어 있는 글 입니다. 2024. 5. 22. 리액트에서 서버와 통신하려면 ajax 2 : post, fetch 보호되어 있는 글 입니다. 2024. 5. 22. 리액트에서 서버와 통신하려면 ajax 1 보호되어 있는 글 입니다. 2024. 5. 22. Lifecycle과 useEffect 2 보호되어 있는 글 입니다. 2024. 5. 21. 이전 1 2 3 4 5 6 7 ··· 19 다음 728x90 반응형
