ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 리액트 개인 공부 정리 (4)
    Computer Science/React 2019.03.27 23:43

     

    24. Fragments

     

    (1) <React.Fragment>

    </React.Fragment>

     

    DOM에 노드를 추가하지 않고

     

    자식 요소의 목록을 그룹화한다.

     

    즉 불필요한 div태그를 써야 할 때

     

    Fragment로 대체할 수 있다.  

     

    또한, items들의 lits를 렌더링 할 때

     

    key attribute를 전달받을 수 있다.

     

    (2) Short Syntax

     

    <>

    </>

     

    React.Fragment를 대신해서 빈 태그를 사용할 수 있다.

     

    마찬가지로 DOM에 요소를 추가하지 않는다.

     

    React.Fragment와 다르게

     

    key attribute를 전달하지 못한다.

     


     

    25. Pure Components

     

    클래스형 컴포넌트와 다르게

     

    컴포넌트가 re-rendered 하지 않는다.

     

    PureComponent가

     

    컴포넌트의 props와 state에 대한

     

    shallow comparison을 수행하여

     


     

    여기서 Shallow comparison(SC) 란?

     

    Primitive Types

     

    똑같은 value와 똑같은 type은 true를 리턴한다.

     

    Complex Types

     

    똑같은 object를 참조하면 true를 리턴한다.

     


     

    shouldComponentUpdate lifecycle 메서드를

     

    구현하기 때문이다.

     

    즉 성능을 향상할 수 있다.

     

    state를 변화시킬 수 없다.

     

    항상 새로운 state를 반영하는

     

    새로운 객체를 리턴한다.

     


     

    26. memo

     

    re-render 피할 수 있는

     

    Pure components와 유사하지만

     

    functional components와 함께 작동한다.

     


     

    27. Refs

     

    1. createRef() 접근

     

    (1) React.createRef() 이용하여 ref를 생성한다.

     

    (2)  render 메서드에 input element에

     

    ref 속성에 생성한 ref를 attach 한다.

     

    (3) componentDidMount에서

     

    current에 접근하여

     

    focus() 메서드를 호출한다.

     

    2. callback refs 접근

     

    (1) property 생성하고 null value를 할당한다.

     

    (2) DOM element에 (1)에서 만든

    ref를 할당하는 메서드를 생성한다.

     

    (3) ref를 input element에 attach 한다.

     

    리액트는 컴포넌트가 마운트 될 때 DOM 요소로

     

    ref callback 호출하고 마운트 언마운트 될 때

     

    null로 호출한다.

     

    앞서 1번 접근과 달리 DOM node는 직접적으로

     

    ref property 사용하여 접근된다.

     

    즉 current가 필요 없다.

     


     

    28. Refs with Class Components

     

    parent component로부터

     

    child component에 ref가 필요하다면,

     

    확실히 가능하다.

     

    또한 Refs는

     

    functional components에 attach 할 수 없다.

     


     

    29. Forwarding Refs

     

    (1) ref 그리고 부모 컴포넌트 생성한다.

     

    (2) ref 속성을 이용하여

     

    자식 컴포넌트에 ref를 attach 한다.

     

    (3) 리액트 라이브러리로부터

     

    즉 React.forwardRef 메서드를 이용하여

     

    ref를 falling 할 수 있다.

     

    (4) arrow function은 forwardRef 메서드

     

    parameter로 전달된다.

     

    컴포넌트가 createRef 메서드에 parameter로서

     

    전달받았을 때 ref 속성을 두 번째 parameter로 받는다.

     


     

    30. Portals

     

    부모 컴포넌트의 DOM 계층 구조 외부에

     

    존재하는 DOM 노드로 자식을

     

    렌더링 하는 방법을 제공한다.

     

    ReactDOM.createPortal()

     

    첫 번째 파라미터는 렌더링 하길 원하는 JSX

     

    두 번째 파라미터는 element를

     

    마운트 할 DOM node이다.

     

    Portals를 사용하는 이유는

     

    첫 번째 DOM이 다른 위치에 자식을

     

    삽입하는 것이 유용하다.

     

    두 번째 포털 내부에서 시작된 이벤트는

     

    DOM트리의 조상이 아니더라도 포함하는

     

    리액트 트리의 조상에 전파된다.

     

    예시

    https://codesandbox.io/s/00254q4n6p

    https://codepen.io/gaearon/pen/jGBWpE

     


     

    31. Error Boundary

     

    Error Boundary는 자식 컴포넌트 트리에서

     

    자바스크립트 에러를 잡아내고, 그 오류를 기록하고, 

     

    fallback UI를 표시하는 리액트 컴포넌트이다.

     

    Error Boundary 배치는 중요하다.

     

    앱 전체에 fall-back UI가 있어야 하는 경우

     

    혹은 단지 컴포넌트가 문제를 발생하는 경우를

     

    컨트롤할 수 있기 때문이다.

     

    static getDerivedStateFromError(error)

     

    오류가 발생한 후 fallback UI를

     

    렌더링 하는 데 사용된다.

     

    componentDidCatch(error, info)

     

    오류 정보를 로그 하는 데 사용된다.

     

     

    댓글 0