레퍼런스 마이닝

리액트 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..

리액트 16의 멋진 기능 중 하나는 return type이다. 이전의 리액트에서는 컴포넌트 아니면 null을 리턴해야 했다. 그게 규칙이었다. string 같은 걸 return 할 수가 없었다. 하나가 아닌 두 개 이상의 리턴 하고 싶어도 이전의 리액트에서는 이렇게 작업을 하지 못했다. array로 감싸거나 span태그를 이용하여 다시 하나의 엘리먼트에 감싸줘야 했다. 불필요한 코드가 늘어났고 상당히 불편하였다. 리액트 16에서는 fragments라는 걸 활용할 수 있다. 또한 를 사용하여 대신할 수도 있다. 또한 String을 반환할 수 있다. fragments, string return type 리액트 16의 첫 번째 기능이다.

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

ESLint 문법 검사 및 자바스크립트 코딩 스타일을 위해서 ESLint라는 도구를 사용한다. 사전에 정의된 코딩 스타일과 맞지 않으면 경과나 에러가 나타나 질 좋은 코드를 작성할 수 있게 도와준다. Guides 코드 작성에 안내선을 표시해 준다. 코드의 시작과 끝을 안내선을 통해 한번에 파악하기 쉽고 심플하고 정리된 코드를 얻을 수 있다. Reactjs code snippets React 관련 템플릿을 단축키로 쉽게 작성할 수 있다. (rcc, rcf 등)

리액트 개발에 있어 필수인 크롬 개발자 도구를 소개한다. 기본적으로 제공되는 크롬 개발자 도구에서는 리액트 정보를 확인할 수 없다. 필요한 플러그인을 설치하자. 크롬 웹 스토어에서 react를 검색하여 React Developer Tools을 설치하자. 설치가 완료되면 React로 구성된 페이지에서 개발자도구를 열면 React 탭이 나타난다. 리액트 컴포넌트들과 Props 값을 쉽게 확 인할 수 있다. 또한 설정 모양의 아이콘을 클릭하고 Highlight Updates 옵션을 활성화하면 리렌더링 될 때마다 빈도에 따라서 하늘색 -> 초록색 -> 노란색 -> 빨간색 순으로 표시가 된다.

React 자바스크립트 라이브러리로 오직 유저 인터페이스 뷰(View)만을 위한 라이브러리이다. Virtual DOM DOM(Document Object Model)은 객체로 문서 구조를 표현하는 방법이다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 절차를 가진다. 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다. 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다. 3. 바뀐 부분만 실제 DOM에 적용한다. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있다. JSX 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다. 코드로..

마지막으로 CSS를 적용하여 보다 보기 좋은 화면으로 만들어 보자. CSS 언급은 따로 하지 않겠다. /* index.css */ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color:#EFF3F7; height: 100%; } html, #root{ height:100%; } /* App.css */ .App { padding:50px; display: flex; justify-content: space-around; flex-w..

지난 시간에 API를 통해 영화 리스트까지 정보를 불러오는 것을 완성하였다. 추가적으로 필요한 정보는 포스터, 제목, 장르, 평점, 설명 등을 Component에 추가 구성해보자. App.js에 _renderMovies() 함수에서 추가로 받을 수 있는 정보를 기술하여 Movie Component에 전달한다. Movie.js Movie 컴포넌트에서 기본적인 HTML 구조를 잡았으며 각 정보별로 세분화된 Component를 구성하였다. 각각의 propTypes도 추가 작성하였다. 아직 css가 입혀지지 않았지만 데이터 정보는 완성되었다.