이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌5 - React - 2년 전 등록 / 일 년 전 수정

컨텍스트(context), 참조(Reference, refs)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 React ContextReference에 대해 알아보겠습니다.

Context

컨텍스트는 상위 컴포넌트에서 하위 컴포넌트로 바로 props 같은 것을 내려주는 역할을 합니다. 중간 단계를 거치지 않고요. 아직은 조금 실험적인 단계이지만, 상황에 따라 유용할 수 있습니다.

실제로 react-router에서 history를 조작하는 방법으로 context를 사용합니다. context를 사용해서 뒤로 가기, 앞으로 가기, 페이지 이동 등을 하는 거죠. context를 사용하려면 지난 시간 컴포넌트에 static 속성 contextTypes를 추가하면 됩니다. 그럼 이제 this.context.속성이름으로 접근할 수 있습니다. 예를 들어 router을 사용하려면

import React, { Component, PropTypes } from 'react';

export default class Basic extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    birth: PropTypes.number.isRequired,
    lang: PropTypes.string,
  };

  static defaultProps = {
    lang: 'Javascript',
  };

  static contextTypes = { // 이 부분을 추가
    router: PropTypes.object.isRequired,
  };

  state = {
    hidden: false,
  };

  onClickButton = () => {
    this.setState({ hidden: true });
    this.hide.disabled = true;
  }

  render() {
    return (
      <div>
        <span>저는 {this.props.lang} 전문 {this.props.name}입니다!</span>
        {!this.state.hidden && <span>{this.props.birth}년에 태어났습니다.</span>}
        <button onClick={this.onClickButton} ref={(ref) => { this.hide = ref; }} >숨기기</button>
        <button onClick={this.context.router.goBack}>뒤로</button>
      </div>
    );
  }
}

와 같이 코딩하면 됩니다. this.context.router.goBack이 연결되었기 때문에, 이제 새로 만든 뒤로 버튼을 누르면 뒤로 가기가 됩니다. 모든 컴포넌트에서 props를 통한 전달 없이 context로 router에 접근 가능합니다. 잘만 활용한다면 정말 편합니다! 

직접 context 객체를 만들어서 전달할 수도 있습니다. 하지만 context는 아직 실험적인 기능이고 context를 너무 남용하면 데이터 추적이 힘들어진다는 단점이 있으므로, 정말로 필요한 상황이나 router 객체처럼 많은 사람이 쓰는 context가 아니면 피하는 게 좋습니다. 직접 만드는 것을 알아보고 싶다면 링크를 참조하세요. 

Reference

React를 사용하다보면, 컴포넌트의 메소드에서 컴포넌트의 태그에 접근하고 싶을 때가 있습니다. 그럴 때 사용하는 게 ref 속성입니다. 위의 컴포넌트에서 숨기기 버튼을 보면 ref 속성이 ref={(ref) => { this.hide = ref; }} 로 설정되어있습니다. 여기서 ref는 해당 태그 자신을 가리킵니다. this는 컴포넌트를 가리키고요. this.hide 속성에 자기를 대입하는 거죠. 

그리고 onClickButton 메소드를 보면 this.hide.disabled = true; 라는 문장을 찾을 수 있습니다. 조금 전에 this.hide = ref; 로 자기 자신을 대입했기 때문에 this.hide는 자기를 가리킵니다. 이렇게 컴포넌트 태그에 ref 속성을 주면 this를 통해 해당 태그로 바로 접근 가능합니다. 예전에는 ref 속성에 ref="hide" 이렇게 속성명 값을 주고 this.refs[속성명]으로 접근했었는데 이것이 deprecated 되어 더는 쓰이지 않습니다.

다음 시간에는 React의 생명주기(Life Cycle)에 대해서 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.