가상돔

->기존의 DOM 트리중 한부분만 수정되도 일일이 DOM을 새로 만들어야한다면 불필요한 연산이 많이발생한다.

• 메모리상에 존재하는 가짜 DOM.
• 기존의 DOM과 가상의 DOM을 비교하여 바뀐부분만 수정하여 업데이트하는방식.
  -> 돔을 언제 새로 그리는가? : 페이지 새로고침,데이터변화..등등

라이프 사이클(=컴포넌트의 생명주기)

• 컴포넌트가 렌더링을 준비하는 순간부터 페이지에서 사라질떄까지의 주기.

• 생성,수정,제거로 총 3단계.
  -> 생성 : 처음 컴포넌트를 불러올떄
  -> 수정 : props,state가 바뀔떄 / 부모 컴포넌트가 업데이트 될떄 / 강제업데이트될떄(거의 다루지않는다)
  -> 제거 : 화면에서 컴포넌트가 사라질떄

• 라이프사이클 함수는 클래스형 컴포넌트에서만 존재.

  componentDidMount(){  // 화면에 최초로 렌더링될떄호출
     console.log('in componentDidMount!');
   }
  
   componentDidUpdate(prevProps, prevState){// 리렌더링될떄호출
       console.log(prevProps, prevState);
       console.log('in componentDidUpdate!');
   }
  
   componentWillUnmount(){ // 제거될때호출
       console.log('in componentWillUnmount!');
   }

컴포넌트

• 클래스형,함수형로 존재한다.
• 클래스형보단 함수형을 사용할것을 권장. (클래스형은 복잡하다)
• 한가지의 기능을 수행하는 단위 ( 레고의 블록 생각.)
• 독립적이며 재사용이가능하다.

state 와 props

• state는 컴포넌트자체에서 가지고있는 데이터
• props는 부모컴포넌트(상위)로부터 받은 데이터

Ref

• 리액트에서 돔요소를 가져오는방법.
• 클래스컴포넌트에선 React.createRef()
• 함수형컴포넌트에선 useRef() // 리액트 훅중 하나.

State 관리

• 클래스컴포넌트에선 setState()
  -함수형 컴포넌트에선 useState()

회고

확실히 개념을 공부하는데는 실제로 어떻게 쓰이는지 감이잡히질않는것같다. 자바스크립트기반이라해서 자바스크립트는 그래도 많이 봤었는데 새로운용어들이 많아서그런지 낯설기만한것같다. 강의당 시간도 굵직굵직하다.. 양이 많다고 틀어놓고 딴생각하지말고 최대한 집중하면서 듣되 여러번보면서 익숙해져야될것같다.