[React] Lifecycle, useEffect, ajax, axios

React Lifecycle

 

리액트 라이프 사이클이란?

컴포넌트는 사람처럼 태어나고 죽는다 라는 의미의 생명 주기

 

• 렌더링이 되는 순간 즉, 컴포넌트가 화면에 보여지는 순간 - mount 된다, 장착된다 ( 생성)
• 컴포넌트를 조작한다 (ex. onClick, input 등) - update 된다. 조작한다. (활동)
• 이전 페이지로 돌아간다 (ex. 상세페이지 -> 홈페이지 ) - unmount 된다. 제거 된다 (제거)

이처럼 크게 보면 3단계로 나누어지는데 라이프 사이클을 왜 알아야하는 것이냐?

라는 의문이 생길 수 있다.

라이프 사이클을 알면 mount 된 후, update 된 후, 제거 된 후 코드 실행 등 여러 가지 순간을 조작할 수 있기 떄문이다.

 

그렇게 조작하기 위해 알아야 하는것이 useEffect 이다.

 

useEffect란 ?

• import { useEffect } from 'react' 방식으로 react 라이브러리에서 사용
• 함수 내부에서 사용
• mount, update 시 useEffect 함수 내부에 적힌 코드가 실행 된다.

 

• useEffect 내부에 있는 코드는 처음 mount 될때 2번 시행된다 (실행은 1번 디버깅용 1번)
• 콘솔창에 2번 출력이 되나 그게 보기 싫다면 index.js에서 React.StrictMode 태그를 제거하면 된다.

 

• useEffect를 쓰는 이유는 js 코드 렌더링이 종료된 후 에 시작한다는 것이 큰 장점
• 예를 들어 반복문으로 10000번 동작하는 코드 아래 간단한 코드가 있다면 페이지 렌더링이 마무리가 늦을텐데
• 렌더링 코드를 먼저하고 useEffect 내부에 반복문을 넣으면 렌더링 먼저 되고 useEffect가 시행된다.
• 마치 비동기 통신과 유사하다.
• 주요 사용 방법
  • 시간이 오래걸리는 연산
  • 서버에서 데이터를 가져오는 작업
  • 타이머
• 왜 useEffect 인가? side Effect 라는 용어가 있는데 함수의 핵심기능과 상관없는 부가기능이라는 뜻
• 그것에서 따온 Effect 이다.

useEffect(() => {
	let a = setTimeout(() => {
		setAlert(false)
	}, 2000)
	return () => {
		clearTimeout(a);
	}
},[ ])

• useEffect 형식
• 렌더링이 다 된 후 2초 뒤에 alert창을 띄우는 코드
• useEffect 내부 return() 코드를 넣어 타이머가 시작하기전에 가지고 있는 타이머를 리셋 하는 것
• '[ ]' 해당 괄호는 디펜던시 라고 하고 해당 디펜던시가 내부에 있다면 1회 실행하라는 것

1. 재 렌더링 마다 코드실행하고 싶으면 useEffect(() => { })
2. mount 시 1히 코드 실행하고싶으면 useEffect(() => { }, [ ])
3. unmount 시 1회 코드 실행하고싶으면 useEffect(() => { return() => {} }, [ ])

 

 

ajax란?

• Asynchronous Javascript And Xml (비동기식 자바스크립트와 xml) 약자
• js 기능을 이용해 서버와 클라이언트가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
• 서버란 ? 데이터를 요청하는 진짜 데이터를 보내주는 곳
• 그러나 정확한 규격에 맞춰 데이터를 요청해야한다

 

• 1. GET
• 데이터를 읽거나 검색 할때 사용되는 method
  • 주소 끝에 파라미터로 포함되어 전송 ( 쿼리스트링 )
  • 내가 데이터를 받을때 사용한다.

 

• 2. POST 
  • 리소스를 생성 업데이트하기위해 서버에 데이터를 보내는 데 사용
  • 내가 데이터를 보낼때 사용한다
• 데이터를 주고 받을 때 새로고침이 항시 시행되는데 새로고침 없이 주고 받으려면 ajax를 사용하면 된다.
• 데이터를 주고 받는 형식은
• ajax
• XMLHttpRequest
• fetch() 
• 방법 등이 있다

 

axios란?

사용방법

• axios로 사용할 것이고 npm install axios 로 패키지를 받고 시작한다.
• import axios from 'axios' 이렇게 세팅
• 서버, json 파일은 문자로만 주고 받을 수 있다
• { name : "Kim" } 이라고 데이터를 보내는 것이아닌
• "{"name" : " kim"}" 이런식으로 주고 받는다
• 이것을 axios 라이브러리가 자동으로 변환 해서 오브젝트로 주고받아준다.

 

• 만약 fetch 로 요청을 하고 주고 받는다면 .then().then() 문법으로 오브젝트 형식으로 바꾸어 줘야한다.