2022. 02. 28. TIL? WIL?

1.  자바스크립트에서 유사배열

• 유사 배열은 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고싶을때 사용합니다.
• 유사배열을 사용하기 위해서는 숫자 형태의 indexing이 가능해야하고, length 속성을 포함해야 합니다.
• 유사배열 요소를 수정하는 방법

1. Array.from() 메서드 사용

Array.from() 는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만듭니다.

1. call, apply, bind 사용

유사배열에서는 forEach와 같은 배열 매서드를 사용하면 배열이 아니므로 에러가 발생합니다. 이 때 call이나 apply를 사용하여 배열 프로토타입에서 forEach를 빌려오는 게 가능합니다. call이나 apply를 사용하면 map, filter, reduce등의 다른 배열 매서드도 사용가능해져 배열의 요소를 수정할 수 있습니다.

bind는 call이나 apply와 다르고 샐행을 하지 않고 가리키는 this만 바꿀 수 있습니다.

 

2.  라이프 사이클

• 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라집니다.
• 생성은 처음으로 컴포넌트를 불러오는 단계입니다.
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 됩니다. 아래의 경우죠!
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  • 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있습니다.)
• 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계입니다.

 

3.  양방향 바인딩

양방향 바인딩은

• 컨트롤러에서 model이 변경됨 -> view 변경됨
• view에서 scope model이 변경됨 -> 컨트롤러에서 model이 변경됨

이렇게 컨트롤러와 뷰 양쪽의 데이터 일치가 모두 가능한 것이 양방향 데이터 바인딩입니다. 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것입니다.

• 부모 컴포넌트 A의 state값이 변하면 자식 컴포넌트 B의 props값이 변경돼 업데이트 되고 다시 이게 A의 값에 영향을 미쳐 A가 업데이트 되고 다시 B 또한 업데이트 되는 무한루프에 빠질 수 있습니다.

4. Event Listener

• [신수정]
  • event listener은 사용자가 어떤 행동(이벤트)를 하는 지 아닌지를 알려주는 것입니다. 예시) 마우스 클릭, 터치, 키보드 누름 등
  • event listener을 clean up 시켜주지 않으면 동작이 발생할 때마다 무한루프에 빠질 수 있습니다. 따라서 컴포넌트가 화면에서 사라질 때 event listener을 해제합니다.
  • event listener은 DOM요소가 있어야 이벤트가 발생하는지 알 수 있습니다. 그래서 함수형 컴포넌트에서는 componentDidMount()역할을 하는 useEffect()훅을 사용합니다.
  • useEffect()는 리액트 훅으로 라이프 사이클 함수 중 componentDidMount와 componentDidUpdate, componentWillUnmount를 합쳐놓은 것입니다.

React.useEffect(() => {
        // rendering 때 실행될 구문이 들어가는 부분
				// componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기예요.

        return() => {
            // 여기가 clean up 부분입니다. componentWillUnmount 때 동작하는 부분
           
        };
    }, []);

5. ref

리액트에서는 가상 DOM에 업데이트를 합니다. domcument.getElementsByClassName를 사용하면 가상 DOM이 아닌 실제 DOM에 입력을 해주는 것인데 실제 DOM에는 업데이트가 되지 않았으므로 오류가 발생합니다.

 

6. SPA와 NPA

• MPA(Multi Page Application)는 HTML 페이지를 여러 개 가지고 있는 어플리케이션입니다.
• SPA(Single Page Application)는 HTM 페이지가 한 개밖에 없는 어플리케이션으로 우리가 사용하는 React가 대표적인 SPA 방식입니다.
• SPA방식을 사용하는 이유 중 하나는 사용성 때문입니다. 페이지를 이동할 때마다 서버에서 주는 HTML로 화면을 바꾸다 보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러와 비효율적입니다.
• 또한 MPA는 상태값을 유지하는 게 어렵습니다. 상태값은 그 페이지에서 가지고 있는 데이터입니다.
• SPA방식의 단점은 딱 한 번 모든 정적자원을 내려받아야 하니, 처음에 모든 컴포넌트를 받아옵니다. 즉, 사용자가 들어가지 않을 페이지까지 전부 가지고 옵니다. 그러다보니 컴포넌트가 많다보면 첫 로딩 속도가 느려질 수 있습니다.

7. React Hook

• Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
• State Hook!
  useState를 사용하여 함수 컴포넌트 안에 state를 추가할 수 있습니다. useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다.
• Effect Hook!
  • useEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해줍니다. (side effects는 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 모든 동작들입니다.)
  • React 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.
• Hook 사용 규칙!
  1. 최상위에서만 Hook을 호출해야합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안됩니다.
  2. React 함수 컴포넌트 내에서만 Hook을 호출해야합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안됩니다.