스파르타코딩클럽 내일배움캠프 TIL31

리액트 복습

• useEffect
  • 함수가 실행이 되면서 useState 를 이용해 업데이트 해주면 함수를 다시 호출한다.
  • 호출된 함수는 다시 실행되고 fetch 메서드가 반복해서 실행되는 것이다.
  • 무한 루프에 빠지지 않으려면 컴포넌트가 보여질 때 한 번만 네트워크 통신을 통해 데이터를 받아오고 그 뒤로는 다시는 네트워크 요청을 하지 않게 해야한다. (useEffect 사용)
  • 컴포넌트가 UnMount(화면에서 사라짐) 될 때 메모리를 정리하거나 네트워크 통신을 닫아야 한다면 useEffect 에 return 함수를 전달해준다.
  • return 의 콜백함수는 컴포넌트가 화면에서 사라질 때 호출된다.
  • 특정한 값이 변경될 때 다시 함수를 호출해야 할 경우에도 사용한다.

// 무한 루프
export default function Products() {
  const [products, setProducts] = useState([]);

// 데이터 폴더에 있는 프로덕트 파일을 잘 가져오면, response를 받아서
// response를 json 형태로 변환해주고, 잘 실행된다면 data를 받아온다.
fetch("data/product.json")
.then(res => res.json())
.then(data => setProducts(data)) // 파일 안에 있는 데이터를 products에 넣어줌

// useEffect를 이용해서 한 번만 실행
export default function Products() {
  const [products, setProducts] = useState([]);

useEffect(() => {
fetch("data/product.json")
.then(res => res.json())
.then(data => setProducts(data));
  return () => console.log("청소") // 컴포넌트가 화면에서 사라질 때 호출
}, []);

자바스크립트 요약

• ES6 Arrow Functions
  • Arrow function은 JavaScript 환경에서 함수를 생성하는 또 다른 방법이다.
  • 더 짧은 구문 외에도 this 키워드의 범위를 유지하는데 이점을 제공합니다

const callMe = (name) => { 
    console.log(name);
}

• Exports & Imports
  • React 프로젝트에서 모듈이라 불리는 여러 자바스크립트 파일들에 코드를 분할한다.
  • 다른 파일의 기능에 계속 액세스하려면 export statements가 필요하다.
• Classes
  • Classes는 constructor 함수와 prototypes를 대체하는 기능이며, 자바스크립트 객체에 blueprints를 정의할 수 있다.