dB's Codeshare

HOC는 코드 재사용 문제를 해결하기 위해 고안되었습니다. createClass 패러다임에서는 이러한 문제를 mixins으로 해결하였습니다. ES6 classes 가 등장하고 createClass는 사라지기 시작했습니다. 하지만 ES6 클래스는 mixins을 지원하지 않는다는 문제점이 있었습니다. 그 결과 HOC가 등장하였으며 재사용에 대한 이슈를 해결한 듯 보였지만, 기존 mixins이 가지고 있던 모든 이슈들을 해결한 건 아니였습니다. Render Props를 사용하면 mixins과 HOC가 가지고 있는 문제점들을 해결할 수 있습니다. Render Props 패턴은 함수로 이루어진 props를 이용하여  컴포넌트 간 코드를 공유하는 방법입니다. <DataProvider render={data => ( <h1>Hello {data.target}</h1> )}/> import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' // Instead of using a HOC, we can share code using a // regular component with a render prop! class Mouse extends React.Component { static propTypes = { render: PropTypes.func.isRequired } state = { x: 0, y: 0 } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return ( <div style={{ height: '100%' }} on...

리액트 16.3 버전이 새롭게 업데이트 되었습니다. 새로운 라이프 사이클과 API들이 소개 되었습니다: context API, ref forwarding API, ergonomic ref API 입니다. Context API Context API는 기존에도 제공되었습니다. 하지만, 상속 문제로 인해 사용 빈도가 적었으며 더 좋은 방법들로 대체되었습니다. 예로, redux, react-router, styled-components 등이 Context API를 기반으로 제작 되었습니다. Context는 CreateContext 함수를 이용해서 제작합니다. 이 함수는 Provider와 Consumer를 호출할 수 있습니다. Provider는 Context에서 사용할 값을 설정하고 Consumer는 설정한 값을 불러올 때 사용합니다. const ThemeContext = React.createContext('light'); class ThemeProvider extends React.Component { state = {theme: 'light'}; render() { return ( <ThemeContext.Provider value={this.state.theme}> {this.props.children} </ThemeContext.Provider> ); } } class ThemedButton extends React.Component { render() { return ( <ThemeContext.Consumer> {theme => <Button theme={theme} />} </ThemeContext.Consumer> ); } } 링크 https://hackernoon.com/how-to-use-the-new-react-co...

Universal Routing 리액트 universal routing은 간단한 미들웨어 스타일 라우터로 isomorphic JavaScript web apps과 single-page 애플리케이션을 위해 제작 되었습니다. 각각의 라우터는 children:[ ] 속성이 있습니다. 이 속성을 사용하여 각각의 path에 따라 보여지는 컴포넌트를 랜더링 할 수 있습니다. const routes = { path: '/admin' children: [ { path: '/', action: () => {/* ... */} // www.example.com/admin }, { path: '/users', children: [ { path: '/', action: () => {/* ... */} // www.example.com/admin/users }, { path: '/:id', action: () => {/* ... */} // www.example.com/admin/users/123 } ] } ] }; 아래와 같이 상품리스트 페이지가 있고, 상품리스트 중에서 하나의 상품을 클릭하면 선호도에 대한 상세 페이지로 이동합니다. 상품리스트는 items이며 하나의 상품id를 333으로 하도록 하겠습니다. 즉, 상품리스트는 상위 페이지며 자식 페이지로 남녀선호도, 연령별선호도, 국가별선호도가 위치합니다. 상품리스트 // items |_ 남녀선호도 // items/333/gender |_ 연령별선호도 // items/333/age |_ 국가별선호도 // items/333/nations export default { path: '/items', children: [{...

컴포넌트 제작 1. Small, focussed component 2. Container component class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <div className="sidebar"> {this.state.items.map(item => ( <div className="sidebar__item">{item}</div> ))} </div> ) } } Containers와 components를 분리합니다. Containers는 작동원리를 포함하고, components는 어떻게 보이는지를 나타냅니다. class SidebarContainer extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ) } } 그렇다면 스타일링은 어떨까요? 1. Single-use classes 2. Components as a s...

리액트에서 컴포넌트를 만드는 방법은 크게 두 가지가 있습니다. 클래스 기반 컴포넌트와 함수 기반 컴포넌트 입니다. ( React.createClass는 16에서 사라짐 ). 클래스 기반 컴포넌트(React.Component, React.PureComponent)는 동일하나 차이점이 있다면 shouldComponentUpdate를 포함/미포함 입니다. shouldComponentUpdate는 렌더링 이전 새로운 props와 state를 받았을 경우 실행됩니다. PureComponent는 shouldComponentUpdate 라이프사이클이 이미 적용된 컴포넌트 입니다. 예를들어, React.Component를 확장해서 컴포넌트를 만들면, shouldComponentUpdate 메소드를 사용하지 않으면, props, state 값이 변경됨에 따라 항상 리렌더링이 됩니다. 반면, PureComponent를 사용하면 내부 shallow level 단계에서 변경된 값이 있을 경우에만 리렌더링 됩니다. 얕은비교(shallow comparison)는 현재 props, state를 nextProps, nextState 객체와 비교하는 것입니다. 반복문을 통해 비교를 진행하며 각각의 객체의 key의 value값이 다르면 true를 반환합니다. 그렇기 때문에, JSON.stringify()와 같은 깊은비교(deep comparison)를 shouldComponentUpdate에서 사용하는 것은 권장하지 않습니다. shouldComponentUpdate(nextProps, nextState) { return this.state.value != nextState.value; } 깊은비교에 대해 좀 더 자세히 알아보도록 하겠습니다. 자바스크립트에서는 두 객체를 자동으로 비교하는 메소드를 제공하지 않습니다. 변수에 할당된 객체가 같은 객체를 참조하고 있다면 동일하다고 나옵니다. 원시값인 문자열, 숫자는 그 값을 비교하지만, 유사배열, 날짜, 객체는 참조값을 비교하기...

(참고내용) 리액트에서 모든 DOM 프로퍼티와 속성값은(이벤트 헨들러포함) 반드시 카멜표기법을 사요해야합니다. 예를들어, tabindex 는  tabIndex와 동일합니다. 예외가 있다면, aria-*, data-* 가 있습니다. 이번 포스팅에서 다룰 내용은 컴포넌트에 <br> 태그 사용법입니다. 정확히 말하면 html 문자열에 있는 newline(\n)을 <br> 태그로 전환하는 방법입니다. 기본적으로 리액트는 cross-site-scripting(XSS) 공격을 막기위해 렌더링 메소드 내부에 html의 문자열을 사용하면 렌더링이 되지 않습니다. 즉, 무조건 텍스트형태로 렌더링이 됩니다. 이러한 취약점을 알고도 사용을 원한다면 아래와 같은 dangerouslySetInnerHTML 방법이 있습니다. function createMarkup() { return {__html: 'First &middot; Second'}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; } 하지만 더 좋은 방법이 있습니다. 바로 Mapping을 통하여 문자열을 배열로 만들어 출력하는 방법입니다. 첫 번째 코드는 기본적인 사용법입니다. 두 번째 코드는 함수 유틸리티로 만들어 리액트 작업시 어디에서도 사용할 수 있도록 제작되었습니다. { data.split('\n').map( line => { return (<span>{line}<br/></span>) }) } export function getNewlinesApplied(html) { if (!html) return null const lines = html.split('\n') if (lines.length === 0) { return html ...

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 자주 사용하는 방법으로는 아래 3가지가 있습니다. 이번 포스팅에서는 CSS 모듈에 대해 알아보도록 하겠습니다. 1. CSS Module 2. Sass 3. styled-components import withStyles from 'isomorphic-style-loader/lib/withStyles' import * as s from './Header.scss' import 된 Headers.scss 는 s 객체로 변환되며, key와 value값으로 클래스명에 접근하게 됩니다. { apply: "Businesses-apply-bc84", btn-choice: "Businesses-btn-choice-c57b", cell: "Businesses-cell-c929", root: "Businesses-root-c558" } 리액트에서 명명된 스타일 객체에 접근하려면 아래와 같이 사용할 수 있습니다. (자바스크립트 객체값 접근 방법). key값이 캐밥스타일(kebab-case)로 이루어져 있다면, 오류를 줄이고자 작은따옴표를 사용하는 것을 권장 합니다. <div className={s.item}></div> <button className={s['btn-wide']}></button> CSS 스타일 로더를 사용하는 이유는 CSS 랜더링 및 동일구조 앱 환경 최적화를 목표로 하고 있습니다. Isomorphic Javascript 앱은 클라이언트와 서버 사이드 모두에서 작동되는 것을 말합니다. 이러한 앱을 만들려면 가장 중요한 것이 바로 추상화입니다. 즉, 의존성을 제거하고 어디서든 사용할 수 있도록 각각의 기능과 역할에만 집중해야 합니다. CSS 스타일도 마찬가지 입니다. CSS Modules 좀 더 자세히 알아보기 CSS 모듈은...