Dev On The Coffee Dev On The Coffee

Programming patterns 리액트는 자주 사용되는 프로그래밍 패턴이 존재합니다. Scene 1 - Stateful components to stateless components Stateful component가 자신의 state setter 함수를 props로 child component에 전달하면, child component의 어떠한 event에 의해 해당 함수가 호출되어 parent component의 state를 변경합니다. 그리고 parent component는 변경된 state를 props로 또 다른 child component(=sibling component)에게 전달해 해당 child component에서 화면에 표시합니다. Scene 2 - Separating contain..

Functional components 지금까지 JavaScript의 클래스를 사용해서 정의한 리액트의 component들은 함수를 사용해서 정의할 수도 있습니다. 이를 function component라고 합니다. Function component는 간단하고 직관적이라는 장점이 있습니다. // A component class written in the usual way: class MyComponentClass extends React.Component { render() { return Hello world; } } // The same component class, written as a stateless functional component: const MyComponentClass = () =>..

Component lifecycle methods 리액트의 수많은 component들은 각각 자신의 lifecycle을 가집니다. 보통 component의 lifecycle 다음과 같이 구성됩니다. Mounting, when the component is being initialized and put into the DOM for the first time Updating, when the component updates as a result of changed state or changed props Unmounting, when the component is being removed from the DOM 그리고 이러한 lifecycle 각각을 제어하기 위해 개발자들이 사용할 수 있는 lifecycl..

Component interacting React application은 몇 십에서 몇 백 개까지 component를 가질 수 있습니다. 각각의 작은 component들은 자신의 역할을 담당하면서 거대한 app을 구성하고 서로 상호작용함으로써 app을 동작시킵니다. Component 간 상호 작용 유형 Component가 다른 component를 렌더링하는 것 Component가 다른 component에게 정보를 전달하는 것 A component in a render function class WelshCorgi extends React.Component { render() { return Welsh Corgi wooooow!; } } class Dog extends React.Component { re..

Component of React Component란 하나의 작업을 수행하는 재사용할 수 있는 작은 코드 뭉치를 의미합니다. 여기서 하나의 작업이란 대체로 HTML 코드를 렌더링하는 것을 말합니다. Necessary import Component를 사용하기 위해서는 React 객체를 import 해두어야 합니다. React 객체에는 리액트 라이브러리를 사용하기 위한 필수적인 메서드들이 담겨있습니다. JSX expression을 사용하는데도 React 객체가 반드시 필요하므로, 첫 줄은 항상 다음 코드로 시작하도록 합니다! import React from 'react'; 또한, component 사용을 위해 ReactDOM 객체도 import합니다. ReactDOM 객체는 React 객체와 마찬가지로 Re..

React basic React.js는 Facebook 엔지니어들이 개발한 UI 개발 목적의 JavaScript 라이브러리입니다. 리액트의 컴포넌트 기반 개발은 Single Page Application을 비롯한 프론트 개발에 큰 변화를 이끌었으며, 근 5~6년간 자바스크립트 생태계의 가장 중요한 존재 중 하나로 자리해 왔습니다. 최근에는 더 효율적인 프론트 개발 라이브러리들이 많이 등장했지만, 리액트의 영향력은 여전히 직간접적으로 느껴집니다. JSX const h1 = Welsh Corgi!!; JSX는 리액트에 사용되기 위해 쓰여진 JavaScript의 syntax extension입니다. 보통 JavaScript 파일 속에 JavaScript 코드와 HTML 코드들이 혼용되어 쓰여진 것들로 통용되므..

Async-Await async, await을 사용하는 구문은 ES8에서 소개된 JavaScript의 비동기 처리를 위한 syntactic sugar입니다. 비동기 처리하는 과정이나 결과는 이전 callback 함수를 통해 구현하는 방식이나 혹은 ES6에서부터 사용하는 promise 객체를 사용해 구현하는 방식과 동일하지만, 문법적으로 조금 더 편리하게 비동기 처리를 할 수 있도록 제공됩니다. async keyword async function myFunc() { // Function body here }; myFunc(); 비동기 함수를 만들기 위해 사용하는 키워드입니다. 구현한 비동기 처리 로직은 위와 같이 async로 선언된 함수로 감싸서 의도대로 실행할 수 있습니다. const myFunc = a..

Browser Compatibility & Transpilation 우리는 정기적으로 web browser의 update 알림을 받습니다. 주기적인 update가 필요한 이유는 보통 보안상 취약점을 처리하고 HTML, CSS 혹은 JavaScript의 새로운 syntax 버전을 지원하기 위해서입니다. 특히, JavaScript의 표준을 관리하는 기관, Ecma International이 2015년에 발표한 ECMAScript2015(흔히, ES6로 불리우는)가 등장했을 때, 많은 개발자들은 장점이 많은 ES6를 바로 채택하고 사용했지만 대부분의 브라우저에서 ES6가 지원되지 않아 브라우저 호환성(browser compatibility) 문제가 발생했습니다. 이 챕터에서는 새로운 syntax 버전과의 ga..