먼저 나의 근황 한 스푼~🥄

부트캠프 수료 이후, 같은 포지션(FE)인 동기들 몇명과 함께 스터디를 진행 중이다. 오늘이 마침 온라인 회의를 하는 날이었는데 라이프사이클이 꽤나 중요한 주제이고 면접에서도 종종 나온다고 했다. 하지만 단번에 이해가 될 내용이 아니었다?
sks..나..난 천재가 아니라느뇽..! 난 한번에 이해를 할 수 없었다^^...
그래서 따로 정리를 해보겠다(당당)
라이프사이클...
다 외워버려ㅡㅡ 이해해버려ㅡㅡ 👊🏻

---

🍉 클래스 컴포넌트 liftcycle

✅Mounting - Updating - Unmounting

<1. Mounting>

1. contructor: 첫 번째로 실행되는 라이프사이클 함수.
   - 컴포넌트가 실행될 때 constructor 먼저 호출한다.
   (앱이 실행되자마자 해줘야 하는 작업들을 이 곳에 넣는다)
   - state를 만드는 곳
   - 주의사항❗
   constructor() 내부에서 setState()를 호출하면 안 됩니다.
   컴포넌트에 지역 state가 필요하다면 생성자 내에서 this.state
   에 초기 state 값을 할당하면 됩니다.

2. render: UI 그려주는 함수

3. componentDidMount: UI가 세팅이 완료되면 우리에게 알려줌
   ("낰낰 UI 준비 완")
   주로 API를 부른다. 왜냐? render 끝나고 바로 호출되는 함수니까!

<2. Updating>

1. render: state가 업데이트 되거나, props가 업데이트 되거나 또는 업데이트가 강요되는 상황일 때! render가 발생한다.

2. componentDidUpdate: state가 업데이트 된 후에 해야하는 작업들(ex.counter 값 바뀌는거)

• componentDidUpdate() 는 갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다. (출처-React 공식문서)

<3. Unmounting>

1. componentWillUnmount: 컴포넌트 마운트 해제됨. 컴포넌트가 사라짐

---

🍉함수형 컴포넌트 liftcycle

🎶useEffect

: 매개변수를 두개 받음(콜백함수,배열)

useEffect(()=>{
	console.log("useEffect1 Fire")
},[])
: 배열에 아무것도 없으면 componentDidMount()처럼 작동
	(처음에만 렌더됨)

useEffect(()⇒{
console.log(”useEffect2 fire”)
},[counter2]) 

: 배열 안에 state가 있으면 componentDidMount()+ componentDidUpdate() 
counter2 값 바뀔때마다 ”useEffect2 fire”

const [value1,setValue1]=useState(0)
const [value2,setValue2]=useState(0)

useEffect(()=>{
    console.log("hey")
},[value1,value2])

const updateValue =()=>{
    setValue1(1) // 1개의 state만 업데이트 됨
}

// 콘솔 결과는 hey 한번만 프린트 됨

=========================================================

const [value1,setValue1]=useState(0)
const [value2,setValue2]=useState(0) 

useEffect(()=>{
    console.log("hey")
 },[value1,value2]) 
const updateValue =()=>{
    setValue1(1) // 2개의 state가 동시에 업데이트 됨
    setValue2(1)
 }

// 콘솔 결과는 hey 한번만 프린트 됨