[React] 기초 정리

import와 require의 비교
- require는 node의 모듈 시스템
- module.exports에서 exports 되는 게 객체나 배열이면 구조 분해할 수 있음
- module.exports는 export default와 호환됨(깊게 들어가면 다르지만 react에서는 호환되는 정도로 이해하면 됨)
- const React = require('react');는 import React from 'react';와 호환됨
- import React, { Component } from 'react';에서 { Component }는 export const Component와 같이 선언된 것을 가져올 때 사용
- import 관련 부분은 react에서 사용
- require 관련 부분은 node에서 사용

map
- react가 key를 보고 같은 component인지 판단함
- .map(v, i)에서 key={i}로 사용하면 성능 최적화에 문제가 생김(단, 요소가 추가만 되는 배열인 경우 i를 써도 됨),
key를 기준으로 요소를 추가하거나 수정/삭제를 판단하기 때문에 배열의 순서가 바뀌면 문제가 생김

state
- array에 push()를 사용하면 react는 array의 변경을 감지하지 못해 render()를 호출하지 않음,
그래서 array에 값을 변경할 때는 ...연산자를 사용하거나 깊은 복사가 되도록 해야 함

props
- 자식 component에게 전달하는 값

주석
- jsx에서는 {/* */}

PureComponent와 React.memo
- shouldComponentUpdate()를 내부적으로 처리하여 불필요한 렌더링을 방지
- 자식들이 모두 적용되어 있으면 부모에도 적용
- shouldComponentUpdate()로 특정한 값만 변경하지 않도록 설정할 때는 Component를 사용해서 처리

React.createRef
- createRef()를 사용 시 current가 추가됨(ex. this.inputRef.current.focus())
- 기존의 (c) => this.inputRef = c는 다른 추가적인 기능을 포함하려 할 때 유용
- 두 가지 모두 동일한 기능이나 custom 한 기능의 유무에 따라 구분되어 사용하면 좋을 듯

props와 state 연결하기
- render() 안에는 setState() 사용금지(무한루프 되기 때문에)
- 부모로부터 받은 props는 자식이 직접 수정하면 안 되고 const [value, setValue] = useState(props.value); 처럼 state로 만든 후에 변경
- constructor안에 this.state = {}를 사용할 때는 좀 더 정밀한 작업이 필요할 때 사용하고, 그 외에는 state = {}로 사용

조건문
- false, undefined, null은 jsx에서 태그 없음을 의미

useRef
- 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해 줌
- useRef는 return을 다시 실행하지 않음
- 화면은 바뀌지 않고 값이 자주 바뀌는 경우

라이프사이클
- componentDidMount()는 컴포넌트가 첫 렌더링 된 후 실행됨
- compnentWillUnmount()는 컴포넌트가 제거되기 직전에 실행됨
- componentDidUpdate()는 리렌더링 후 실행됨
- 클래스의 경우 > constructor > render > ref > componentDidMount
- setState/props 바뀔 때 > shouldComponentUpdate(true) > render > componentDidUpdate
- 부모가 자식 컴포넌트를 없앴을 때 > componentWillUnmount > 소멸

고차함수
- 아래 코드가 고차함수를 적용한 부분
- 주석('//') 부분은 기존 사용 방법

class HighOrderComponent extends Component {
  onClickBtn = (name) => () => {}
  // onClickBtn = (name) => {}
    
  render() {
    return (
      ...
      <button onClick={this.onClickBtn('test')}>테스트</button>
      {/*<button onClick={() => this.onClickBtn('test')}>테스트</button>*/}
      ...
    )
  }
}

useEffect
- componentDidMount, componentDidUpdate, componentWillUnmount의 기능을 담당

useEffect(() => {
}, []); // 빈 배열이면 componentDidMount와 동일

useEffect(() => {
}, [inputs]); // 배열에 요소가 있으면 componentDidMount, componentDidUpdate 둘 다 실행

useEffect(() => {
  return () => {
    // componentWillUnmount
  }
}, []);

useMemo
- 함수형 컴포넌트 내부에서 발생하는 복잡한 연산을 최적화
- 렌더링 과정에서 연산을 실행하고 값이 바뀐게 아니라면 이전에 연산했던 값을 재사용
- 함수를 필요할 때만 생성할 수 있음

useCallback
- useMemo와 비슷한 함수
- 렌더링 성능을 최적화하는데 사용
- 이벤트 핸들러 함수를 필요할 때만 생성할 수 있음

useCallback(() => {
}, []); // 컴포넌트가 렌더링될 때 한 번만 생성

useCallback(() => {
  setValue(value);
}, [value]); // 배열 안의 값이 바뀔 때마다 생성
             // value의 상태가 바뀌어야하는 경우