[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지23회차 미션

useEffect

랜더링될때마다 콜백안에 들어갈 코드를 수행한다. 정확히말하자면 화면에 랜더링된 직후에 불려짐

새로고침시 마다 계속 랜더링

11번라인의 코드를 변경해보자

useEffect(()=>{
	console.log(랜더링될때마다(카운트값포함))
})

useEffect(()=>{
	console.log(최초 한번만 랜더링)
},[])

useEffect(()=>{
	console.log(최초 한번만 랜더링 + 카운트값이 바뀔때마다 랜더링)
},[count])

useEffect clean up

함수를 수행하고 끝낼수있도록 return안에 언마운트 작업을 해줌, 안그러면 계속 돌아감

useEffect(()=>{
	const timer = setInterval(()=>{
    	console.log('timer woring..')
    },1000)
    
    return () =>{
    	clearInterval(timer)
        console.log('timer stop')
    }
},[])

---

패스트캠프 프론트앤드 인강 23일차, useEffect와 useMemo를 배워보았다.

useEffect 

리액트 Hook함수인 useEffect 는

우리가만든 컴포넌트가 처음화면에 나타날때 혹은 사라지게될때 어떤 특정작업을 할수있고.
컴포넌트가 업데이트될때, 업데이트전, 리랜더링될때마다 특정작업을할수있다.

 

useEffect를 import하고 컴포넌트에서 사용해보자

컴포넌트가 마운트(나타나는것, 추가)될때 언마운트(삭제)될때  특정작업을 처리할건데

배열에는 의존되는 값들이 들어가는데 비어있다면 컴포넌트가 처음화면에 나타날때만 실행된다.

두번째 파라미터에는 비어있는 배열을 넣어준다(deeps는 dependency의 약자로 의존한다는 뜻)

import React, {useEffect} from 'react';

function Italian({foods, onRemove, onToggle}){
    const { foodname, ingredient, id, active} = foods; 
    useEffect(()=>{console.log('컴포넌트가 화면에 나타남')},[])           
    return(
    <div>
        <b style={{color: active ? 'green' : 'black', cursor : 'pointer'}} onClick={()=>onToggle(id)}>{foodname}</b> <span>{ingredient}</span>
        <button onClick={() => onRemove(id)}>삭제</button>
    </div>
    );
}

export default function Useeffect({food, onRemove, onToggle}){
    return(
        <div>
            {food.map((test)=><Italian foods={test} key={test.id} onRemove={onRemove} onToggle={onToggle}/>)} 
        </div>
    )
}

3개 리스트일때 나타나는 콘솔창과 1개 등록시 나타나는 콘솔창

이번에는 컴포넌트가 사라질때 특정작업을 하는방법은

같은 함수에서 클리너함수를 반환하면 된다.

    useEffect(()=>{
        console.log('컴포넌트가 화면에 나타남')
        return () => {
            console.log('컴포넌트가 화면에서 사라짐')//제거하기때문에 클리너함수라고함
        }
    },[]) 

삭제시 컴포넌트가 화면에 사라짐이라는 문구가 출력

 

 

마운트될때 주로하는 작업으로는

props -> state

REST API

D3 Video.js

setInterval, setTimeout

        

언마운트될때 주로하는 작업으로는

clearInterval, cleaerTimeout

라이브러리 인스턴스 제거등이있다.

 

만약 아래처럼 두번째 파라미터에 배열이 차있으면 어떻게 될까?

useEffect(()=>{
        console.log('food값이 설정됨')
        console.log(foods)
        return () => {
            console.log('food값이 바뀌기 전')
            console.log(foods)
        }
    },[foods]) 

 

주의할점.

해당값이 바뀔때마다 등록한 함수가 호출된다
직전에는 클리너함수가 호출된다
값이 바뀔때도 호출되지만 처음나타날때도 호출된다

만약에 props로 받아온값을 참조하거나 usestate로 관리하고있는 값을 참조한경우는 deeps에 꼭 넣어줘야 
경고가 안나타난다.

 

UseMemo

이전에 연산된값을 재사용,성능최적화

active된 초록색을 세보도록하는 함수를 만들어보자.

import React, {useRef, useState, useMemo} from 'react';
import './App.css';
import Useeffect from './Useeffect'
import CreateFood from './CreateFood'

function countActiveFoods(food){
  console.log('활성화된 초록색의 글자수 세기')
  return food.filter(food => food.active).length;
}

function App() {
  const [inputs,setInputs] = useState({
    foodname:'',
    ingredient:'',
  });
  const {foodname, ingredient} = inputs;
  const onChange = e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]:value
    })
  }
  const [food, setFoods] = useState(
    [
    {id:'1', foodname:'pizza', ingredient:'cheese in topping with tomato and basil', active:true},
    {id:'2', foodname:'pasta', ingredient:'pasta sauce,noodle,tomato sauce, meatball and basil', active:false},
    {id:'3', foodname:'gambas', ingredient:'olive oil, shrimp, galic and pepper', active:false}
    ]
  )

  const nextId = useRef(4);

  const onCreate = () => {
    const foods = {
      id: nextId.current,
      foodname,
      ingredient,
    };
    setFoods(food.concat(foods))

    setInputs({
      foodname:'',
      ingredient:'',
    });

    nextId.current += 1;
    console.log(nextId.current); //id값이 +1된모습을 확인할수있다.

  };
  const onRemove = (id) =>{
    setFoods(food.filter(test => test.id !== id));
  }

  const onToggle = id =>{
    setFoods(food.map(food => food.id === id ? {...food, active: !food.active} : food))
  }

  const count = useMemo(()=>countActiveFoods(food),[food]);
  return (
    <>
    <CreateFood 
    foodname={foodname} 
    ingredient={ingredient} 
    onChange={onChange} 
    onCreate={onCreate}
    />
    <Useeffect food={food} onRemove={onRemove} onToggle={onToggle} />
    <div>활성음식 수: {count}</div>
    </>
  )
}

export default App;

초록색으로 활성화된수만 표시됨

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스