도리쓰에러쓰

[React] Ajax 요청방법 - 2 본문

코딩애플 (React)/기초수업 (코딩애플) - 2

[React] Ajax 요청방법 - 2

강도리 2022. 1. 20. 21:40

저번 게시물에 이어서 작성하겠습니다. (코드 참고)

 

[React] React에서의 Ajax 요청 방법 / axios 설치

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법) 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번

dori-coding.tistory.com

1. 서버에 데이터 보내기 (POST 요청)

axios.post('서버URL', 서버에 보낼 데이터);

+ 요청시의 header 설정도 가능

axios.post('https://codingapple1.github.io/shop/data2.json', {id : 'test', pw : 1234})
	.then((result)=>{ })
    .catch(()=>{ })

2. [더보기] 버튼 눌렀을 때 로딩중 UI 띄워주기

function App() {
	return(
    	<HTML 많은 곳 />
        <button className='btn btn-primary' onClick={()=>{
        	// 로딩중 UI 띄워주는 코드
          	axios.get('https://codingapple1.github.io/shop/data2.json')
          	.then((result)=>{
                // 로딩중 UI 없애는 코드
          	})
          	.catch(()=>{
            	// 로딩중 UI 없애는 코드 & 실패 UI 띄워주는 코드
          	})
        }}>더보기</button>
	)
}

- state를 변경해서 코드를 짜면 됩니다.

3. 페이지 방문하자마자 Ajax 요청하기

function App() {
	useEffect(()=>{
    	axios.get().then().catch();
    }, []);
    return (
    	<div>
        	<HTML 많은 곳 />
        </div>
    )
}

- 이런 식으로 useEffect()를 사용하여 App이라는 컴포넌트가 load 혹은 update 시 ajax 요청을 실행하면 되는데, load 시에만 요청을 실행하고 싶기 때문에 대괄호[]를 추가하면 됩니다.

 

* 이번 게시물은 프로젝트 코드 추가된 것이 없습니다.

저작자표시 비영리 변경금지

'코딩애플 (React) > 기초수업 (코딩애플) - 2' 카테고리의 다른 글

[React] Component 3개 중첩하여 만들고 state 전달하기  (0) 2022.01.20
[React] React에서의 Ajax 요청 방법 / axios 설치  (0) 2022.01.19
[React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법)  (0) 2022.01.18
[React] SASS 개념, 설치 및 기본 문법  (0) 2022.01.17
[React] styled-components를 이용한 class없는 CSS 스타일링  (0) 2022.01.12
'코딩애플 (React)/기초수업 (코딩애플) - 2' Related Articles more
Comments