들어가기 전에

• 이 포스팅은 https://reactjs.org/docs/hooks-intro.html 에 있는 포스팅을 번역한 것입니다. 오역이나 의역이 있을 수 있습니다. 지적해주시면 확인 후 바로 정정하겠습니다.

• original source of this posting is from https://reactjs.org/docs/hooks-intro.html If the original author requests deletion, it will be deleted immediately.

• Translated by Jake Seo (서진규)

  	- https://velog.io/@jakeseo_me
  	- https://github.com/n00nietzsche

리액트 훅스 공식문서로 배워보자 #1, Hooks 소개!

Hooks 소개

Hooks는 React 16.8에서 새롭게 도입됐습니다. 훅스는 클래스를 사용하지 않고도 우리가 상태(state)와 리액트의 기능(features)을 사용할 수 있게 해줍니다.

import React, { useState } from 'react';

function Example() {
  // 새로운 상태 변수를 선언합니다. 우리는 이 상태변수를 count라 부를 것입니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

이 새로운 기능인 useState는 'Hooks' 중 우리가 배울 첫 'Hook' 입니다. 위의 소스 코드는 앞으로 우리가 배울 Hooks의 미리보기 정도라고 보시면 됩니다. 아직 위의 소스가 이해가 안 된다고 하더라도 걱정할 필요는 없습니다.

다음 글부터 본격적으로 Hooks를 배워보도록 할 것입니다. 이 페이지에서는, 우리가 React에 Hooks라는 기능을 도입한 이유가 무엇인지 그리고 Hooks가 좋은 앱을 만드는데 어떻게 도움이 될 수 있을지에 대한 설명을 할 것입니다.

알아두세요
React 16.8.0가 Hooks를 지원하기 시작한 첫 릴리즈 버전입니다. 업그레이드 할 때, React DOM을 포함한 모든 패키지를 업데이트 하는 것을 잊지 마세요. React Native는 다음 안정화(stable) 버전에서 Hooks를 지원할 것입니다.

Video 소개

React Conf 2018에서 Sophie Alpert 그리고 Dan Abramov가 Hooks를 소개했습니다. 그리고 Hooks를 사용하기 위해 어플리케이션을 어떻게 리팩토링해야 하는지를 Ryan Florence가 시연해보였습니다. 다음 비디오를 보시죠.

Video는 여기서 확인하시면 됩니다.

기존의 틀을 깨는 변화(Breaking Changes)는 없습니다.

계속하기 전에, Hooks는 다음과 같은 특성을 지녔다는 것을 짚고 갑시다.

• 훅스는 완전히 선택의 문제이다. 몇몇 컴포넌트에서 현재 존재하는 코드를 다시 쓰지 않고도 Hooks를 사용해볼 수 있습니다. 원하지 않는다면 지금 당장 Hooks를 사용하거나 배울 필요는 없습니다.

• 100% 이전과 호환됩니다. Hooks는 틀을 깨는 변화를 가지고 있지 않습니다.

• 현재 사용 가능합니다. 리액트 버전 16.8.0에서 Hooks가 현재 사용 가능합니다.

리액트에서 classes를 지울 계획은 없습니다. 이 페이지의 하단에서 훅스의 점진적 도입 전략을 읽어볼 수 있습니다.

Hooks는 우리가 알던 리액트 개념들에 대한 지식을 대체하지 않습니다. 대신, Hooks는 더욱 직접적인 API를 우리가 알던 리액트 개념에 제공합니다 : props, state, context, refs, lifecycle. 나중에 보여드릴 것처럼, Hooks는 이 개념들을 조합할 강력한 방법을 제공합니다.

Hooks를 배우고 싶다면, 다음 페이지로 바로 넘어가셔도 됩니다! 왜 React에 Hooks가 추가된건지 그리고 우리가 어떻게 어플리케이션을 다시 작성하지 않고도 hooks를 사용하는지에 대해서 더 알고 싶다면 이 페이지를 계속 읽으셔도 무방합니다.

동기부여

Hooks는 우리가 컴포넌트를 작성하고 유지보수하며 지난 5년간 겪은 겉으로 보기엔 단절되어 보이는 많은 종류의 문제들을 해결합니다. 만일 여러분이 리액트를 배우고 있는 도중이거나 매일 사용하거나에 관계없이, 심지어 다른 라이브러리의 비슷한 컴포넌트 모델을 선호하더라도 아마 몇가지 문제를 인지할 수 있게 될 것입니다.

컴포넌트간 상태가 있는 로직을 재사용하는 것은 어렵습니다.

리액트는 재사용 가능한 코드를컴포넌트에 '부착'하는 방법을 제공하지 않습니다 (이를테면 컴포넌트를 어떤 저장소에 연결하는 것과 같은 행위). 만일 여러분이 오랜기간동안 리액트를 사용해왔다면, 이 문제를 해결하기 위한 [render props]와 [higher-components] 같은 패턴에 친숙하실 것입니다. 하지만 이러한 패턴들을 사용할 때는, 기존에 작성한 컴포넌트들을 다시 재구성(re-structure)해야 할 필요가 생깁니다. 재구성하는 일은 꽤나 성가신 작업입니다. 여러분이 React 개발자 도구에서 일반적인 리액트 어플리케이션을 본다면, "Wrapper Hell"을 목격하게 될 가능성이 큽니다. "Wrapper Hell"은 providers, consumers, higher-order components, render props, 그리고 다른 추상적 개념들로 감싸져 있습니다. 우리가 그것들을 [개발자 도구에서 필터링 가능]했던 반면에, "Wrapper Hell"은 더 깊게 내재된 문제들을 지적합니다 : '리액트는 상태가 존재하는 로직을 공유하기 위해서 더 나은 primitive가 필요하다.'

Hooks를 이용하면, 컴포넌트로부터 상태가 있는 로직을 추출할 수 있습니다. 그래서 컴포넌트가 재사용 가능하고 독립적으로 테스트될 수 있게 만들어줄 수 있습니다. Hooks는 우리가 컴포넌트 계층의 변화 없이 상태가 있는 로직을 재사용할 수 있도록 허락해줍니다. 그로 인해, 많은 컴포넌트 사이에서 또는 커뮤니티와 함께 Hooks를 공유하는 것을 더욱 쉽게 만듭니다.

이 내용은 여러분의 훅스 앱을 빌드해봅시다에서 더 자세하기 다룰 것입니다.

클래스는 사람과 기계 모두 헷갈리게 만듭니다.

클래스가 코드의 재사용과 코드의 조직을 더 어렵게 만드는 것 뿐만 아니라, 우리는 클래스가 리액트를 배우는 사람들에게 커다란 장벽으로 작용할 수 있다는 것을 발견했습니다. 여러분은 반드시 자바스크립트에서 this가 어떻게 동작하는지 이해해야 합니다. 자바스크립트의 this는 대부분의 언어에서의 this와는 매우 다르게 작동합니다. 여러분은 이벤트 핸들러를 바인드하는 것을 잊지 말아야 합니다. 아직 확정되지 않은 문법 제안없이는 코드가 아직 너무나 장황합니다. 사람들은 props와 state그리고 top-down 데이터 흐름을 완벽히 이해하지만 아직 class와는 씨름 중 입니다. 리액트에서 함수와 클래스 컴포넌트 사이의 차이점 그리고 언제 각각을 사용하는지에 대해서는 경험 많은 리액트 개발자들 사이에서도 많은 논쟁이 있습니다.

추가적으로, 리액트는 나온지 5년밖에 되지 않았고, 앞으로 5년간은 이 기술의 관련성이 유지되었으면 합니다. Svelte, Angular, Glimmer 그리고 그 외의 다른 언어들이 보여준 것과 같이 컴포넌트의 사전 컴파일은 커다란 미래의 잠재력을 가지고 있습니다. 특히, 만일 이것이 템플릿에 제한되어 있지 않다면 어떨까요. 최근, Prepack을 이용한 컴포넌트 폴딩에 대해 실험해왔고 우리는 유망한 조기의 결과들을 보았습니다. 하지만, 우리는 클래스 컴포넌트들이 이러한 최적화들을 더 느린 경로로 가게 만드는 의도하지 않은 패턴을 사용하게 만들 수 있다는 것을 발견했습니다. 클래스들은 오늘날의 툴들에 대한 이슈 또한 보여주었습니다. 예를 들면, 클래스는 잘 최소화(minify)되지 않고 hot reloading을 더욱 분열시키고 의존할 수 없게 만듭니다. 우리는 코드가 더욱 최적화 가능한 경로에 머물게 하는 API를 보여주길 원합니다.

이러한 문제를 해결하기 위해, Hooks는 클래스 없이 리액트의 기능들을 사용할 수 있게 만들어줍니다. 개념적으로, 리액트 컴포넌트들은 언제나 함수에 가까웠습니다. 훅스는 함수의 개념들을 끌어안지만, 리액트의 실용적인 정신은 희생하지 않습니다. Hooks는 명령형 코드로 해결책을 찾을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 기술들을 배우는 것을 강요하지 않습니다.

Hooks 한 눈에 보기는 Hooks를 배우기 시작하기에 좋은 페이지입니다.

점진적 적용 전략

한줄요약: 리액트에서 클래스를 제거할 계획은 없습니다.

우리는 리액트 개발자들이 제품을 배송하는데에 집중하고 있다는 것을 알고 공개되는 모든 새로운 API를 들여다 볼 시간이 없는 것을 알고 있습니다. Hooks는 매우 새롭고 Hooks를 배우거나 적용하기 전에 더 많은 예제와 튜토리얼을 기다리는 것이 더 나을 수도 있습니다.

우리는 또한 새로운 primitive를 리액트에 추가하는 기준이 매우 높다는 것을 이해하고 있습니다. 궁금해하는 독자들을 위해, 우리는 더 상세한 내용과 함께 동기부여를 할 수 있고 특정한 디자인 결정에 대해서 더 많은 관점을 제공하는 상세한 RFC를 준비했습니다.

중요한 것은, Hooks가 이미 존재하는 코드와 잘 작동하므로, 점진적으로 적용할 수 있다는 것입니다. Hooks를 당장에 급하게 마이그레이션 할 필요는 없습니다. 우리는 "많은 코드 재작성"을 피하는 방식을 권장합니다. 특히 존재하는, 복잡한 클래스 컴포넌트들에 대해서는 그렇습니다. "Hooks처럼 생각하기"를 시작하려면 약간의 생각의 전환이 필요합니다. 우리의 경험에 따르면, 새로운 필수적이지 않은 컴포넌트들에 대해서 먼저 훅스를 적용하는 것을 연습하는 것이 가장 좋습니다. 그래서 모든 팀원들이 Hooks를 사용하는 것에 대해서 편안함을 느끼게 해주어야 합니다. 훅스를 시도해본 뒤에, 좋든 나쁘든 피드백을 보내는 것을 꺼리지마세요.

우리는 Hooks가 모든 존재하는 클래스에 대한 use cases를 커버하길 바라지만, 우리는 가까운 미래를 위해 클래스형 컴포넌트들도 계속 지원할 것입니다. 페이스북에서는 클래스로 쓰여진 아주 많은 컴포넌트들을 가지고 있고, 그들을 재작성할 계획이 없습니다. 대신에, 새로운 컴포넌트들에 대해서는 Hooks를 사용하기 시작할 것입니다.

많이 물어보는 질문(FAQ)

우리는 Hooks에 대해 가장 많이 물어보는 질문에 대한 답변을 위해 Hooks FAQ 페이지를 준비했습니다.

다음 단계

이 페이지가 끝날 때 쯤이면, Hooks가 어떠한 문제들을 해결하는지에 대한 대략적인 아이디어를 갖게 되었을 것입니다. 하지만 여전히 많은 세부사항들은 명확하지 않습니다. 걱정하지 마세요! 예제를 통해 Hooks를 배우는 다음 페이지로 가봅시다.