React

요새 velopert 슨상님의 리액트 강의를 듣고 있다. React.js 올인원 패키지 online

커리큘럼이 엄청 방대하다.

오늘 공부한 부분

• useState
• useRef
• useEffect
• useMemo
• useCallBack
• React.memo

수업내용 && 내 생각 && 기타등등

• destructuring이 많은데, 예나 지금이나 매우 헷갈림
• vue랑 대입시켜서 생각해보니 좀 더 이해하기 쉽다.
• key에 인덱스 넣는건 삼가하자. Key가 없으면 배열이 굉장히 비효율적으로 업데이트 된다! (참조값.. 같은거 때문인가? )
• useRef = 특정 돔을 선택할 때 쓸 수도 있고, 어떤 변수를 기억하기 위해 사용하기도 한다. ex. 값이 바뀌어도(nextId.current += 1;) 리렌더링 되지 않음
• push하면 리렌더링 안됨! spread 연산자나 concat 사용할 것
• onClick에는 함수를 호출하는 것이 아니라 넣어줘야한다는 것을 잊지 말쟈..
• 왜 보고 따라하기만 하는데 에러가 나지?ㅎㅎㅎ… `` 자동으로 브라켓이 만들어졌었다 ^^..

• useEffect
  마운트 될때: Props -> state 넘겨줄때 / API 요청 / 라이브러리 사용할때 / setTimeOut 등 비동기 함수
  언마운트: clearInterval, clearTimeout / 라이브러리 인스턴스 제거

  useEffect(()=>{마운트될때함수; return()=>{언마운트될때함수}, [두 함수에서 사용한 값, 함수 등 == 바뀌는 값])

• 부모 컴포넌트 리랜더링되면 자식 컴포넌트도 리랜더링된다
• useMemo는 특정값이 바뀔때만 렌더링 / 필요한 순간에 필요한 연산만 / 컴포넌트 최적화
• useCallback으로 기존 함수들을 다 감싸주면된다. 그리고 내부에서 의존하고 있는 값을 deps 배열에 넣어줌. 배열 값이 바뀔때만 그 함수가 실행되고 아니면 원래 값을 사용, 만약 함수가 받아오는 인자도 있다면 그 인자도 넣어줘야함
• 연산된 값 재사용 = useMemo, 특정함수 재사용 = useCallBack, 랜더링된 값 재사용 = React.memo

(갑자기 뷰하고싶네…)