레퍼런스 마이닝

리액트 16의 네 번째 멋진 기능은 state null이다. 컴포넌트 업데이트 프로세스는 set state를 하면 이루어진다. state null을 통해 언제 컴포넌트를 업데이트 할지, 안 할지 제어할 수 있게 해 준다. 컴포넌트를 업데이트를 원치 않을 때의 예시 버튼을 클릭할 때마다 setState를 통해 카운트가 증가되며 MAX가 되면 null을 반환하여 화면 업데이트를 제어한다.

리액트 16의 세 번째 멋진 기능은 Error Boundaries이다. 직역하면 에러 경계이다. 이건 컴포넌트 자식의 에러를 관리할 수 있게 해 준다. 만약 포털이 에러를 만들면, 앱으로 관리할 수 있다. return types을 에러로 만들면, 동일하게 관리할 수 있다. 정상 작동할 경우에는 자식의 에러에만 한정된다. ErrorMaker 컴포넌트를 만들고 freinds에 몇 가지 이름을 넣어보자. 아래와 같이 렌더가 정상적으로 되었다. 이제 에러를 발생시켜보자. componentDidMount에서 setTimeout을 사용하여 1초 후 friends에 undefined를 할당해보자. 개발을 하다 보면 일반적이고 흔히 볼 수 있는 화면이다. 하지만 이런 화면은 사용자 입장에서는 불편하다. 에러를 잡아보자..

리액트 16의 두 번째 멋진 기능은 portals이다. 생각보다 유용해 보이지 않을 수 있는 데 사용하다 보면 유용함을 느낄 수 있다. 기본적으로 리액트는 div를 찾아서 마운트를 한다. 가끔은 리액트 root 밖에서 마운트를 해야 될 때가 있다 예를 들어 헤더가 root 밖에 있고 헤더의 타이틀 및 CSS를 변경하고 싶을 때 또는 다른 사이트를 로딩할 때 등이다. 이럴 경우 portals를 사용하면 된다. portals은 리액트 root 밖에서 리액트를 넣을 수 있도록 해준다. span 태그에 id를 지정해서 만들고 컴포넌트에서 엘리먼트를 리턴하는 대신 portals을 리턴하면 된다. import { createPortal } from 'react-dom'; const Message = () => 'J..

리액트 15 버전이 나온 지(2016년 4월 7일) 1.5년 만(2017년 9월 26일)에 리액트 16 버전이 릴리즈 되었다. 리액트 16에서 놓쳤던 부분에 대해서 알아보도록 하자. 우선 create-react-app 명령어도 프로젝트를 생성, code . 명령어로 VSC를 실행, yarn start 명령어로 서버를 구동해 보자. 리액트 16이 릴리즈 되면서 크게 변화된 4가지를 다음 시간에 같이 알아보자.