Skip to main content

[dB's 리액트] 리액트 16.3 무엇이 바뀌었나?!

리액트 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-context-api-fce011e7d87

New Lifecycle

링크
http://javasampleapproach.com/frontend/react/react-component-lifecycle-methods-from-v16-3-react-lifecycle-example


Labels:

Comments

Post a Comment

Popular posts from this blog

[dB's 리액트] Styled Components_ 기본개념

컴포넌트 제작 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...
Post a Comment
Read more

[dB's 리액트] Render Prop 사용하기

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...
Post a Comment
Read more