React 본질 파악하기 -2

박경현·2022년 11월 25일

React

오늘은 useState와 useRef, useEffect에 대한 내용과 리액트의 라이프 사이클에 대해 배웠다

자주 배우지만 자주 까먹어서 이번에는 잊지 않으려고 나만의 방식으로 적어보려고 한다

클래스형 컴포넌트에서 라이프사이클

컴포넌트 생성시 (Mount 단계)

3가지 단계로 되어있다

componentWillMount

아직 화면에 나오기 전, 즉 이 컴포넌트가 렌더링 되기전이다!
Render

JSX코드를 브라우저가 이해할 수 있게 Babel이 컴파일 한 후 DOM에 그려짐!
componentDidMount

브라우저 즉 DOM에 컴포넌트가 적용된 후이고, 이때부터 DOM 이벤트를 사용할 수 있다
ex) ajax요청, 화면 높이 값 등을 이때 만듦

컴포넌트 업데이트시

Props 나 State가 변경시 발생
리액트는 해당 컴포넌트를 리 렌더링함! => 그 부분만 업데이트

shouldComponentUpdate(nextProps, nextState) {
	// nextProps를 받아오고 이걸 현재 props랑 비교하고 다른 부분만 리턴!
	return (JSON.stringfy(nextProps) != JSON.stringfy(this.pops)
}

이 과정을 거친 후 Re Render가 된다!

컴포넌트 제거시

제거의 경우 componentWillMount를 해주면 컴포넌트가 완전 제거 된다
-> 지금은 에러가 나는 문제로 사용하지 않는다고 한다

함수형 Hook이 있는 이유

함수형 컴포넌트에서 클래스형에서 라이프사이클 관리하는 것보다 쉽게 관리할 수 있게 해주기 위해서이다!

useState VS 변수 VS useRef

useState: 값이 바뀌면 리렌더링됨!

변수: 변수가 증가되거나 감소되도 화면에 보여지지 않고 리렌더링 되지도 않는다!! -> 써도 의미없다!

useRef: 바뀐값이 저장은 되지만 다른 요소에 의해 리렌더링 되기 전까지는 DOM에 바뀐내용이 적용이 안된다!!

useEffect ([] 있을때, 없을때, [state] 있을때)

useEffect(()=>{}) 이렇게만 적혀있는 경우

이건 componentWillMount + shouldComponentUpdate 섞은거다
처음 렌더링 될때와, 리렌더링 될때마다 적용한다!!

useEffect(()=>{},[]) 이렇게만 적혀있는 경우

이건 componentWillMount이고 처음 렌더링 될때만 적용되고 실행된다!

useEffect(()=>{},[state]) 이렇게만 적혀있는 경우

이 state가 변할때마다 실행!

useEffect cleanup code

  useEffect(()=> {
    // document.title은 위에 이모티콘옆에 문구 바꾸는거
    const time = setInterval(()=> {
        console.log('반복반복')
    },1000)
    console.log('useEffect실행!')
    // clean up 코드 -> 컴포넌트가 화면에서 사라질때 실행!
    return() => {
        console.log('cleanup!!!')
        clearInterval(time)
    }
  },[])

즉 컴포넌트가 지워질때 발생하는 이벤트이다!