React.md

what-is-react

What is react???

1. 등장배경
   1. 유저와의 인터랙션이 증가하고 동적인 UI표현이 증가하면서 DOM과 Event Handler가 복잡한 형태로 얽히는 일이 발생한다.
   2. 이에 따라서 DOM을 어떻게 업데이트할까가 아닌 아예 다 날려버리고 새로 그리는 방식을 생각하게 되었고 리액트가 개발되었다.
2. 개념
   1. Redux
      1. JavaScreipt library
      2. managing application state
      3. mostly used with React or Angular
   2. diffing algorithm(qlry 알고리즘)
      1. 두 개의 트리를 비교할 때, 두 엘리먼트의 루트 엘리먼트에서부터 비교한다. 이후는 루트 엘리먼트의 타입에 따라 결정된다.
         1. 엘리먼트의 타입이 다른 경우
            1. 루트 엘리먼트 아래의 모든 컴포넌트가 언마운트되고 state도 사라지고 새로운 컴포넌트를 마운트한다.
         2. DOM 엘리먼트의 타입이 같은 경우
            1. 속성만 업데이트 한다.
         3. 같은 타입의 컴포넌트 엘리먼트
            1. 컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지된다. React는 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신한다. 그리고 redner() 메서드가 호출되어 비교 알고리즘이 이전 결과와 새로운 결과를 재귀적으로 처리한다.
      2. 자식에 대한 재귀적 처리
         1. 자식 엘리먼트에 대해 key값이나 id가 없다면 리액트는 동작면에서 비교적으로 느려질 수 있다. 하지만 key값이나 id를 설정해주면 새로운 값이 추가될 때 새로운 엘리먼트만 추가해주고 나머지 값들은 그냥 이동만 해주면 되서 속도면에서 효율이 좋다.
   3. props
      1. properties
      2. 값을 컴포넌트에 전달해줘야할 때 사용
   4. useState
      1. 컴포넌트에서 상태를 관리할 수 있다.
      2. 상태의 기본값을 파라미터로 넣어서 호출해준다.
      3. 이 함수를 호출하면 배열이 반환된다. 첫번째는 원소의 현재상태, 두번째는 Setter함수다.
   5. userRef
      1. useRef()를 사용하여 Ref객체를 만들고 원하는 DOM에 ref값으로 설정하면 Ref객체의 .current값은 그 DOM을 가르킨다.
      2. 다음 값을 관리할 수 있다.
         1. setTimeout, setInterval 을 통해서 만들어진 id
         2. 외부 라이브러리를 사용하여 생성된 인스턴스
         3. scroll 위치
   6. 배열을 렌더링할 때는 키(key) 값이 필요하다
      1. key가 있으면 효율적으로 컴포넌트를 업데이트한다.
   7. useEffect
      1. 컴포넌트가 마운트, 언마운트 됐을 때, 업데이트 될 때의 특정 작업을 처리하는 방법
      2. useEffect(함수, deps(의존값이 들어있는 배열))
      3. deps파라미터가 생락되면 컴포넌트가 리렌더링 될 때마다 호출이 된다.
   8. useMemeo
      1. 특정 값을 재사용하고 싶을 때
      2. useMemo(함수[어떻게 연산할지], deps배열)
      3. 배열 안의 내용이 바뀌면 함수를 연산하고 아니면 배열을 재사용한다.
      4. 어떤 배열의 총합이 업데이트 될 때 렌더링 해줘야 하는 항목이 있다면, 이 함수를 사용해서 값이 변하지 않았을 때는 이전의 값을 재사용하고 변하면 값을 다시 계산하여 업데이트 해주는 용도로 사용한다.
   9. useCallback
      1. 특정 함수를 재사용하고 싶을 때
      2. 함수안에서 사용하는 상태 혹은 props가 있다면 꼭 deps 배열 안에 포함시켜야 된다.
   10. React.memo
   11. 컴포넌트의 props를 이전과 비교하여 바뀌지 않았다면 리렌더링을 방지하여 성능을 최적화한다.
   12. useCallback, useMemo, React.memo는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 한다.
   13. useReducer
       1. 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
   14. useState vs useReducer
       1. 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean값이라면 useState로 관리
   15. css
       1. 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, css 클래시 이름과 중복되는 일에 대하여 걱정할 필요가 없다.