솔적솔적

오늘은 리액트에서 Ajax의 요청방법은 어떻게 하나? 에대해서 알아보고자합니다만, 그전에 Ajax에 대한 개념과 Ajax를 사용하려할 때 알아야 할 요청방법들에 대해서도 살펴보도록 하겠습니다. 자, 그럼 먼저 오늘 목표로 하려하는 Ajax, 요녀석은 뭘까요? | Ajax 란? Ajax란 Asynchronous JavaScript and XML의 약자로 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 것입니다. Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 예를들어, 홈페이지에 3영역으로 나눠져있습니다. 내가 검색하고 싶은 것을 검색할 수 있는 검색 영역, 검색해서 나오는 목록 수(조회영역) 검색해서 나온 목..

| Lifecycle이란 예를들어서 detail페이지있잖아요, 화면에 detail페이지가 보이는 순간 이 때를 페이지에 장착이 된다. 또는 마운트(mount)된다라고도하고, 컴포넌트 안에서 state 조작을하면 update되는 과정도 있고, 컴포넌트가 쓸모가 없어지는 경우, 이 경우 컴포넌트 제거되는데 이게 unmount 라고한다. 이런 살아나서 죽는 생물같이 리액트에도 삶의 주기가 있다는 것. mount update unmount 이 라이프사이클을 알고 있다면, 중간중간 내가 코드에 간섭을 하여, 특정코드를 실행할 수 있다. update될 때 특정 코드 실행할 수 있고, unmount될 때 중간에 코드를 넣어 실행할 수 있다는 것이다. 그리고 function들 안에서 기본적으로 쓸 수 있는 함수, us..

리액트 라우터를 사용하여 페이지이동을 하려한다. 🕵️ 목표1. 리액트 라우터 설치 그리고 셋팅방법 🕵️ 목표2. 페이지를 이동 작성방법, 버튼 만들기 🕵️ 목표3. 라우터 6버전에서는 navigate 함수를 사용하자. 의 방법 정리 🕵️ 목표4. nested routes 사용하기 | 라우터 사용1. 라우터 라이브러리 설치 npm install react-router-dom@6 | 라우터 사용2. index.js 파일에 BrowserRouter로 감싸기 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); | 라우터로 페이지..

터미널을 새로 오픈하여 | 기존리액트 + 타입스크립트 추가 설치 명령어 npm install --save typescript @types/node @types/react @types/react-dom @types/jest | 리액트 + 타입스크립트 설치 명령어 npx create-react-app 프로젝트작명 --template typescript 한 뒤 .js file을 → .ts file로 바꿔서 사용합니다. | 타입관련 버그 예방 타입지정 - JSX 타입지정 let 박스 :JSX.Element = let 버튼 :JSX.Element = - button 등 기본 태그들 간단하게 타입지정할 때 기본 태그들은 JSX.IntrinsicElements라는 이름의 타입으로 사용 let 박스 :JSX.Intri..