[TIL] 22.05.04

[ropering]

• useRef() 함수
  • read-dom 코드 내부의 전역변수에 접근할 수 있다. memoizedStates에 초기값을 저장했다가, update가 되어도 계속 이 값을 바라보고 있어서 라이프사이클동안 같은 값이 유지된다.
  • 요약
    • useRef()를 호출해서 만들어진 object는 그 컴포넌트의 전체 사이클 동안 유지된다.
    • current의 값을 변경해도 re-render가 되지 않는다.
  • 활용
    • re-rendering이 필요하지 않을 때
    • instance를 useRef()를 이용해서 생성하면 불필요한 메모리 사용을 줄일 수 있다
    • .current.focus로 트리거 발생 시 해당 폼으로 focus 할 수 있다

컴포넌트 생명 주기 (Component Life Cycle)

• unmount란
  • 컴포넌트가 DOM에서 제거되는 것
  • unmount 될 때 호출되는 함수
    1. componenetWillUnmount - 컴포넌트가 제거되기 직전에 호출되는 함수
• mount란
  • DOM 객체가 생성되고 브라우저에 나타나는 것
  • mount 될 때 호출되는 함수 (순서대로 호출된다!)
    1. constructor
    2. getDerivedStateFromProps
    3. render
    4. componentDidMount - 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수
• 컴포넌트가 업데이트되는 경우
  • props 또는 state 값이 변경되었을때
  • 부모 컴포넌트가 re-rendering 될 때
  • this.forceUpdate로 강제로 rendering 했을 때

[[React] 리액트 - 컴포넌트 생명 주기 (Component Life Cycle)](https://lktprogrammer.tistory.com/130)

[https://flyingsquirrel.medium.com/react-코드-까보기-useref는-dom에-접근할-때-뿐만-아니라-다양하게-응용할-수-있어요-f0359ad23f3b#:~:text=우리가](https://flyingsquirrel.medium.com/react-%EC%BD%94%EB%93%9C-%EA%B9%8C%EB%B3%B4%EA%B8%B0-useref%EB%8A%94-dom%EC%97%90-%EC%A0%91%EA%B7%BC%ED%95%A0-%EB%95%8C-%EB%BF%90%EB%A7%8C-%EC%95%84%EB%8B%88%EB%9D%BC-%EB%8B%A4%EC%96%91%ED%95%98%EA%B2%8C-%EC%9D%91%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4%EC%9A%94-f0359ad23f3b#:~:text=%EC%9A%B0%EB%A6%AC%EA%B0%80) 사용하는 useRef,접근할 수 있게 됩니다.