✍🏻 [Code Camp_TIL] 16일차: class형 컴포넌트, 컴포넌트 생명주기, open-API

class형 컴포넌트

class란?

class란 물건을 만드는 설명서라고 보면 된다. class 안에 변수나 함수를 넣을 수 있다.

const date = new Date()
// date는 객체(instance)

	date.getFullYear()
    date.getMonth()
    date.getDate()

위의 코드에서 getFullYear, getMonth, getDate는 메서드라고 한다. new Date()는 내장객체이다.

클래스형으로 바꾸면 다음과 같다.

class Date {
  getFullYear(){
    // 연도 추출 가능
  }
  getMonth(){
    // 월 추출 가능
  } 
  getDate(){
    // 일 추출 가능
  }
}

클래스에서 함수와 변수를 사용할때는 function, let, const를 붙이지 않는다. 또한, 유사한 것들을 하나의 class에 모아서 그룹핑할 수 있다. 객체 형태로 그룹핑해서 사용하는 것을 객체지향프로그래밍(OOP: Objective Oriented Programming)이라고 한다.

class 컴포넌트 생명주기(life cycle)

컴포넌트의 생명주기란, 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 method이다.

1. 그리기 -> render
2. 그리고 난 뒤 -> componentDidMount
3. 그리고 난 뒤 변경됐을 때 -> componentDidUpdate
4. 그리고 난 뒤 사라질 때 -> componentWillUnmount

예를 들어, input창에 있는 포커스를 깜빡깜빡거리게 하고 싶다면, 인풋창을 그리고 난 뒤에 componentDidMount 메서드를 사용해서 포커스가 깜빡깜빡거리게 하면 된다.

함수형 컴포넌트의 생명주기 hook: useEffect

함수형 컴포넌트의 생명주기관련 hook으로는 useEffect가 있다. useEffect하나로 class 컴포넌트 생명주기에 따른 함수들을 유사하게 구현할 수 있다.

useEffect는 기본적으로 렌더(화면그리기) 이후에 실행된다.

componentDidMount

// 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됨(1번만 실행)

useEffect(()=>{
		console.log("마운트 됨!!")
	},[])

componentDidUpdate

// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	})


// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	},[someState])

*componentDidUpdate와 비슷하지만 다른 점은, Mount 됐을 때도 한번 실행된다는 점이다!

componentWillUnmount

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")

		//이부분이 끝나고 진행할 것들
		return(()=>{
			console.log("여기서 나갈래요!!")
		})

	})

의존성 배열의 중요성!

useEffect를 사용할 때 의존성 배열을 적어주지 않고, return도 적어주지 않았다면 무한렌더가 발생하게 된다.

또한, useEffect는 의존성 배열 인자에 따라 렌더가 달라지기 때문에 의존성 배열을 잘 다뤄야 한다. 즉, 의존성 배열이 함수형 컴포넌트의 생명주기를 결정하는 포인트다!

useEffect 사용시 주의사항

useEffect 안에서는 가급적 setState를 사용하지 않는 것이 좋다. 컴포넌트가 마운트된 이후에 setState를 적용하면, state가 변경되고 변경된 state로 컴포넌트가 다시 그려지게(리랜더) 된다.

다시 말해, useEffect 내에서 setState를 사용하면 불필요한 리렌더나 무한루프가 발생하고, 성능면에서 비효율적이게 된다.

무료로 제공되는 API: open-API

open-api 또는 public api는 누구든지 쓸 수 있도록 공개된 API를 말한다. 예를 들면, 동물 이미지, 날씨 정보, 바이러스 정보, 금융 정보 등 여러 정보들을 API를 통해 무료로 데이터를 사용할 수 있다.

오픈 API를 잘 활용하면, 백엔드 없이도 서비스를 만드는것이 가능하다! 참고로 open-api는 대부분 rest api다.

무료 api 사이트 모음
https://github.com/public-apis/public-apis

사이트에서 api를 이용할 때 체크해야 할 것들!

• auth: 인증 필요한가? 회원가입 해야 하는지 여부.
• HTTPS: 보안이 강화되어 있는 api 인지? axios.get(https://~). no 라고 되어있는 것은 http로 사용
• CORS: no는 보안 관련 설정 복잡한 편. yes를 사용해서 연습하자.

useQuery를 사용하면 훨씬 효율적. 캐싱이 된다는 장점도 있다. axios는 캐싱이 되지 않는다.