TIL - 21.07.18 👨‍💻

• 노마드코더 ~#4.2
• 프로그래머스 1단계

---

useEffect 겉핡기

React class 컴포넌트의 componentDid~애들은 하던 작업은 함수 컴포넌트에서 useEffect Hook으로 할 수 있다.

useEffect()는 componentDidMount(), componentDidUpdate(), componentWillUnmount() 세가지가 합쳐진 것으로 볼 수 있다.

componentDidMount() 는 컴포넌트 최초 렌더시 실행,
componentDidUpdate() 는 스테이트 변경으로 컴포넌트가 리프레쉬 될 때 실행,
componentWillUnmount() 는 컴포넌트 종료시 실행된다.

그 중 componentDidMount 같은 경우는 useEffect의 두번째 인자로 빈 배열을 넣으면 구현 가능하다.

---

prop-types

prop types는 전달 받는 프롭스가 내가 원하는 자료열인지 확인해주는 메소드이다.

npm i prop-types로 설치하고 import PropTypes from 'prop-types'로 불러온다.

프롭스 받는 컴포넌트로 가서 함수 밖에서 사용하게 되는데,

import PropTypes from 'prop-types'

Component.propTypes = {
  key1: PropTypes.string
  key2: PropTypes.number.isRequired
}
// 여기서 포로퍼티 키가 key1인 값이 전달되지 않거나 string이어야 오류가 발생하지 않고,
// key2의 경우는 프로퍼티 값이 number여야 오류가 발생하지 않는다. (전달되지 않아도 오류 발생)
  

---

async, await

자바스크립트는 기본적으로 비동기적이기에 데이터 정보를 전부 불러오기 전에 실행되면 안되는 코드가 실행되는 경우가 있다.

그 경우 async 키워드와 await 키워드를 사용하게 되는데,
데이터를 불러오는 함수 앞에 async를 붙히고 데이터를 직접 가져오는 메소드 앞에 await를 붙혀서 async 함수 안, await 키워드가 붙은 함수(메소드) 다음 코드를 동기적으로 실행되게 하는 것이다.

  const getMovies = async () =>{
    const {data: {data: {movies}}} = await axios.get('https://yts.mx/api/v2/list_movies.json?sort_by=rating');
    setMovies(movies);
    setIsLoading(false);
  }
  // axios는 fetch와 유사한데, npm i axios 하고 불러오는 것으로 사용가능하다.

  useEffect(()=> {
    getMovies();
  }, [])
//  useEffect 훅을 이용해서 componentDidMount 와 같이 컴포넌트 최초 렌더시에만 실행되게 했다.

// 노마드 코더의 리액트 클론코딩 도중에 나온 코드이다.

TO DO 🔥

• React

  • 노마드코더 #4.3~

• JavaScript

  • 재귀함수

Retrospect 🧐

결국 주말에 가족들이랑 왕창 놀아버렸다.
반성좀 하자 🤦

Reference 🙇

https://ko.reactjs.org/
https://nomadcoders.co/