#react comment

- 파일들을 불러와서 import한 부분들을 하나로 합쳐주고 css같은 파일도 로드해주는것이 웹팩의기능임

- css를 불러오는 css-loader, 파일/폰트/미디어를 불러오는 file-loader, es5문법으로 바꿔주는 bebel
- function을 써서 컴포넌트를 만드는것을 [함수컴포넌트]
- 렌더링한다 = 보여준다
- <fragment> 기능은 react v16부터 가능 빈꺾새(<>)로도 사용가능
- undefined가 렌더링되지않도록 해야함
- css는 snake-case가 아닌 camel-case로 작성
- 태그는 꼭 닫아줘야함. 짝으로 닫던지, self-closing하던지
- 주석은 중괄호안에 넣어서 작성해야함
- prettier설정은 .prettierrc에서 함 단축키 ctrl+alt+shift+P, 자세한설정은 https://prettier.io/docs/en/options.html 

- 함수형컴포넌트로 작성하는게 추세지만 현재까지 작성된 많은 클래스형컴포넌트의 유지보수를 위해서라도 개념은 숙지하는게 좋음
- 함수형을 넘겨줄때 return을 안쓸거면 ()로 감싸서 주면 return하는것처럼 됨, {}를 빼거나...
- useState를 사용할때 값을 직접변경하지말자 > 불변성 유지를 위함 > filter map같은 원래객체를 변형하지 않는 function사용하기

- 이벤트
    . 카멜케이스로 작성해야함
    . 객체형태로 작성해야함

- 특정 변수 등의 값을 객체안에서 키값으로 쓰고싶을 때 대괄호[]로 감싸주면 됨
- DOM조작을 위해서 id를 사용하지만 리액트 컴포넌트는 한 화면에 중복으로 사용될 수 있기에 id중복방지를 위해 ref를 이용하는것이 권장됨
- 컴포넌트 내부에서 DOM에 접근할때는 ref를 사용하지만 그 전에 ref를 사용하지 않고 구현할수 있는지부터 판단하는것이 좋음. 많이 사용할수록 설계가 꼬일가능성있기때문
- 반복생성되는 컴포넌트나 dom에 key값을 항상 주자

- 마운트 시 실행되는 메서드
  . constructor, getDerivedStateFromProps, render, componentDidMount
- 컴포넌트가 리랜더링되는 상황
  . 전달받은 props 변경 시
  . 자신의 state 변경 시
  . 부모컴포넌트 리랜더링 시
  . this.forceUpdate로 강제 렌더링 시킬 때

​- constructor
  . 컴포넌트 생성시 호출 됨
  . 여기서 state의 초기값을 설정함
- getDerivedStateFromProps (nextProps, prevState)
  . 컴포넌트 마운트, 업데이트시 호출 됨
  . 여기서 props로 받아온값을 state에 동기화시킴 : 그래서 props는 next고 state는 prev임
- componentDidMount ()
  . 첫렌더링 다 마친 후 호출 됨
  . 외부라이브러리나 비동기작업 처리함
- shouldComponentUpdate (nextProps, nextState)
  . props/state 변경 시 컴포넌트 리렌더링여부를 결정, bool값을 반환
  . 재정의하여 처리하지않으면 언제나 true를 반환
- getSnapshotBeforeUpdate (prevProps, prevState)
  . 렌더링결과물이 브라우저에 실제반영직전 호출 됨
  . 업데이트하기 직전값을 참고할필요가 있을 때 사용
- componentDidUpdate (prevProps, prevState, snapshot)
  . 리렌더링 완료 후 호출 됨
  . getSnapshotBeforeUpdate에서 반환한 snapshot값을 받을 수 있음
- componentWillUnmount ()
  . 컴포넌트를 제거할 때 호출 됨
- componentDidCatch (error, info)
  . 에러발생시 호출 됨
  . 여기서 에러처리 함

​​