[React.JS] 강좌 8편 ref: DOM에 이름을 달아주자


liste

이번 강좌는 React.js 의 ref에 대한 강좌입니다.

1. 소개

ref는 reference 를 의미하며, 이는 DOM 요소에 이름을 달아줍니다.
HTML 의 id와 사뭇 비슷하지만, id는 일반 DOM 요소에 특정 DOM 메소드만 사용 할 수 있지만,
ref는 DOM 요소에도 사용하고 컴포넌트에도 사용 할 수 있으며,
해당 컴포넌트가 가지고있는 메소드 및 변수들을 사용 할 수 있다는 점이 큰 차이점 입니다.


1.1 Ref 를 배우기전에..

배우기 전에 한가지 사실을 먼저 짚고 넘어갑시다.

ref를 아무 곳에서나 자주 사용하는건 절대 비추입니다.

비록 ref를 사용하는것이 가끔씩은 코드를 간결하게 짤 수 있게해주지만,

state 및 props 로 해결 할 수 있는 부분에선 ref 를 사용하지 않고,
해결 할 수 없는 부분에서만 ref 를 사용하는 것이 유지보수에 좋은 방향입니다.

따라서, 이 개념을 일단 잘 배워뒀다가 남용하지 말고 꼭 필요한 때에 쓰도록 합시다.


1.2. 그래서 어떤 경우에 써야할까?

ref는 다음과 같은 경우에 유용하게 사용됩니다.

  1. 컴포넌트에 의해 렌더 된 DOM 에 직접 어떠한 처리를 해야 할 경우
  2. 큰 프로젝트에 React 컴포넌트를 사용하는 경우 (예: 다른 웹프레임워크와 혼용)

2. ref 사용하기

ref 를 사용하는 방법은 두가지 방법이 있습니다 – 문자열 Attribute 사용, 콜백 함수 사용

2.1 문자열 사용하기

이 방법은 outdated된 방법입니다. 그래도 일단 참고용으로 한번 배워봅시다.

  • LINE 5:   DOM에 ref="refName" 형식으로 ref를 지정해줍니다.
  • LINE 12: 문자열 형식으로 만든 ref 는 this.refs.refName으로 접근해야 합니다.
    추가적으론, refs 를 사용 할 때는 컴포넌트가 렌더링 된 후 이여야 합니다.


2.2.1 콜백 함수 사용하기

  • LINE 5: { } 안에 함수를 넣어 ref 를 설정하였습니다.
    이 코드에선 arrow function 이 사용되었습니다.
    함수 안에서 어떤 변수가 ref 로 사용 될 지 직접 정하였습니다.
  • LINE 12: 5번줄에서 썼던 변수를 사용하면 됩니다. 더이상 String을 쓸 때 처럼
    this.refs 를 사용하지 않아도 됩니다.

결과물은 2.1 과 동일하오니 생략하겠습니다.

2.2.2 조금 응용해보기

ref는 일반 DOM 요소 뿐만 아니라 컴포넌트 자체에 적용하여 컴포넌트의
내장된 메소드 및 변수를 사용 할 수 있습니다. 예제를 한번 살펴봅시다.

위와 같은 구린 데이터플로우는 절대 사용하면 안되고 “이런 것 도 할 수 있다” 란걸
보여주기 위한 예제 입니다.

  • LINE 19: TextBox 컴포넌트의 input 박스의 ref를 this.input으로 지정하였으며
  • LINE 9:   Hello 컴포넌트에서 TextBox 컴포넌트의 ref 를 this.textBox 로 지정하고
  • LINE 3:   ref 를 통하여 input 의 값을 변경합니다


3. 적용하기

이번엔 ref를 사용하기에 적절한 사례에 대하여 알아보겠습니다.

예를들어, input  과 버튼이 있고,

버튼을 누르면 input 을 초기화 하고 focus 를 해야 할 때는, ref 를 사용 해야만 합니다.

  • LINE 4:  JavaScript DOM 메소드를 이용하여 인풋박스에 포커스를 하였습니다.
  • LINE 10: ref를 설정하는 부분입니다

마무리하며..

ref를 사용하기 전엔 언제나 이를 사용 하지 않고 해결 할 수 있는 방안이 있는지 고려해보세요.

다음 강좌에선 URL에 따라 다른 결과물을 보여주는 React.js의 Router 에 대하여 알아보겠습니다.

liste

  • hazebob

    좋은 강좌 써주셔서 감사합니다. 설명을 참 잘 해주시고 예제도 적당하여 참 잘 보고 있습니다.
    한 가지 궁금한 건 리액트를 이정도로 공부하신 경로나 참고 자료가 있으신지요? 있다면 공유해주실 수 있을까요?
    리액트 관련하여 수많은 자료가 범람하지만 이렇게 정리가 잘 된 강좌는 없어서요..^^;

    • 강좌의 주제의 경우 http://www.tutorialspoint.com/reactjs/index.htm TutorialsPoint 에 기반해서 작성하고 있습니다. 그리고 매뉴얼이랑 여기저기 구글링해서 작성하였구요!

      • hazebob

        답변 감사합니다. 🙂 좋은 강의 잘 보고 배우겠습니다.