[Ch 3] React Team Assignment

ssjeu·2022년 5월 24일
0

Project

목록 보기
4/6
  1. 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요?
    유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?

( Array.isArray 메서드, array instanceof Array: 배열 판단 )

  • 배열(array): 관련 있는 데이터를 하나의 변수에 할당해 관리하기 위해 사용하는 데이터 타입

  • 유사배열(array-like object): 말 그대로 배열과 유사한 객체, 배열같이 생겼지만 key가 숫자이고 length 속성 값을 가지고 있는 객체

    • 배열처럼 yoosa[0], yoosa[1], yoosa.length 같은 것 활용 가능
    • 하지만 배열의 메서드 사용 불가
    • 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고싶을때 사용

  • JavaScript에서 유사배열을 사용하기 위한 조건
    - 1. 숫자 형태의 indexing이 가능할것
    - 2. length 속성을 포함할것
    이는 유사배열을 배열처럼 사용하기 위한 최소한의 조건
    위의 규칙을 준수해, 아래와 같이 유사배열을 선언해 사용 가능

  • 유사배열의 수정

    • Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 생성 (MDN)
      -> Array.from()으로 유사 배열 객체이 있는 value를 복사해 배열로 만드는 것이다. 그러면 배열 메서드를 사용 가능

    • call, apply, bind 사용
      -> 메서드를 빌려 쓰는 방법 (apply, call): 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내 것처럼 사용할 수 있도록 함
      -> 각각의 자세한 개념 설명


  1. 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다.
    컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?


부모 컴포넌트가 업데이트가 된다면 아래와 같은 순서로 메서드 실행
1. Parent render
2. Child render
3. Child componentDidUpdate
4. Parent componentDidUpdate

컴포넌트가 처음 생성될 때처럼 부모 컴포넌트가 재렌더링되기 때문에 Parent의 render가 먼저 호출되고 자식 컴포넌트인 Child도 실행되면서 Child render

Child가 모두 업데이트 되면 componentDidUpdate 순서로 메서드가 호출

Child 컴포넌트가 모두 업데이트 되어야 부모인 Parent 컴포넌트도 모두 업데이트되어서 Parent componentDidUpdate도 실행

컴포넌트 A에서 “르탄이”라는 state를 “진도사우르스” 변경
-> 부모 컴포넌트에서 Updating이 발생
-> shouldComponentUpdate 가 실행
-> 바뀐 props를 이용하여 부모 컴포넌트의 렌더링
-> 마찬가지로 바뀐 props를 이어받아 컴포넌트 B의 렌더링이 실행됨


  1. 양방향 바인딩은 무엇일까요?
    양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요.
    (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

  • 데이터 바인딩
    뷰와 모델에 있는 데이터를 동일하게 만들어주는 것, 두 데이터 혹은 정보의 소스를 일치시키는 기법, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 객체)를 일치시키는 것

    • js에 있는 데이터를 화면상에 보여주기 위한 과정
      -> 1. document 선택자로 DOM 요소에 접근합니다.
      -> 2. innerText로 텍스트를 변경
      -> 프로젝트가 커질수록 모든 데이터를 제어하기에는 무리인 과정

    • Angular, Vue, React와 같은 프레임워크/라이브러리들을 사용하면 데이터 바인딩을 보다 깔끔하게 개발 가능
      -> 양방향 바인딩(Angular, Vue) & 단방향 바인딩(React)

  • 양방향 바인딩
    일일이 값을 찾아와서 매칭해주는 과정 없이 자동적으로 동기화를 해주는 개념

    • 컨트롤러와 뷰 양쪽의 데이터 일치가 모두 가능한 것, 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신
      -> 장점 : 코드의 사용면에서 코드량을 크게 줄여줌, 유지보수나 코드 관리 용이
      -> 단점 : 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있음

    • 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS 실행부에서 변경
      -> 메서드를 빌려 쓰는 방법 (apply, call): 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내 것처럼 사용할 수 있도록 함
      (참고 글)

  • 양방향 바인딩 사용 시 리렌더링 과정


    양방향 바인딩 라이브러리 Vue 의 데이터 흐름 도식화

  1. 부모 컴포넌트는 props를 통해 자식에게 데이터 전달, 자식은 events를 통해 부모로 메세지 전달
  2. 컴포넌트는 watcher라는 것이 있고 데이터의 수정 발생 시 다시 렌더링
  3. 부모와 자식 컴포넌트는 watcher 라는 매개체 통해 지속적으로 데이터 일치


  1. event listener는 등록되면 반드시 해제되어야 합니다.
    클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!)
    그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?
  • 클래스형 컴포넌트에서 componentDidMount() 역할 → 함수형 컴포넌트에서 useEffect() 훅
  • useEffect의 return 구문에서 clean up 함수 적용 (useEffect()에서 parameter로 넣은 함수의 return 함수) component의 unmount이전 / update직전에 어떤 작업을 수행하고 싶다면 clean-up 함수를 반환
    - unmount 될 때: useEffect(func, [])
    - 특정값 update 직전: useEffect(func, [특정값])
  • clean-up 함수를 사용시 작동 순서
    re-render -> 이전 effect clean-up -> effect


  1. 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다.
    domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

  • ref
    일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용,
    리액트에서 DOM 요소에 이름을 다는 방법이 ref를 사용

  • id는 유일해야 하지만 컴포넌트 재사용을 한다면 중복될 가능성이 존재,
    ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동
    리액트에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용
    - 사용해야 하는 경우 : '특정 input에 포커스 부여', '스크롤 박스 조작', 'Canvas에 그리기', ..

  • 다른 컴포넌트 클래스의 하위 함수를 참조 할 수 있으나, React의 기본 원칙은 부모 컴포넌트와 하위 컴포넌트 사이에서만 데이터를 교류하는 것이기에 ref를 사용해 외부 컴포넌트의 함수를 참조하게 되면 스파게티 코드가 될 수 있다.

**ref는 전역적으로 사용되지 않고 내가 정한 스코프 내에서만 작동하기때문에 외부에서는 사용을 하지 못하게 하면서 코드를 쉽게 유지보수 하는데 도움을 준다.**

리액트의 경우 컴포넌트 내에 업데이트가 발생할 경우, 바로 DOM에 이 내용을 반영하는 것이 아니라 가상 DOM에 내용을 저장한 후, 업데이트된 부분만 실제 DOM에 적용하는 방식으로 작동한다.

그렇기 때문에 docmuent.getElementsByClassName등의 선택자를 사용해 리액트 내의 요소들을 제어하려고 하면 제대로 작동하지 않거나 의도하지 않은 라이프 사이클 흐름 내에서 이벤트가 발생할수도 있다.

ref는 가상 DOM에 있는 리액트 요소에도 접근이 가능하기 때문에 이와 같은 문제를 방지할 수 있다.

또한 ref는 컴포넌트 라이프 사이클 내에서 유지되는 변경 가능한 변수이며, 변수가 변할 때 렌더링이 추가로 발생하지 않는다. 그렇기 때문에 ref를 활용하면 전체 컴포넌트를 렌더링 시키지 않고, DOM에만 접근하여 내가 원하는 이벤트나 효과를 추가하는 것이 가능하다.
profile
ssjeu
이전 포스트

[Ch 3] React 입문주차 S.A.

0개의 댓글