해석하며 공부하는 것을 목적으로 하기 때문에 다수의 의역, 오역이 있음을 미리 밝힙니다.
원본 : https://reactjs.org/docs/hooks-intro.html
Hooks를 소개합니다
Hooks는 리액트 16.8에 새롭게 추가되었습니다. Hooks는 클래스를 사용하지 않아도 state와 다른 리액트 기능을 사용할 수 있게 해줍니다.
import React, {useState} from 'react';
function Example(){
const [count, setCount]=useState(0);
return(
<div>
<p>You clicked {count} times</p>
<button onClick={()=>setCount(count+1)}>
Click me
</button>
</div>
);
}새로운 함수인 useState "Hook"에서 첫번째로 배울 것이지만 이 예시는 맛보기일 뿐입니다. 이해가 되지 않더라도 걱정하지마세요!
다음 섹션에서 Hooks에 대해서 배우기 시작할 것입니다. 이번 섹션에서는 왜 React에 Hook이 도입되었는지, 어떻게 하면 좋은 어플리케이션 코드를 작성할 수 있는지 설명할 거에요.
참고
리액트 16.8.0은 Hooks를 지원하는 첫번째 릴리즈입니다. 업그레이드할 때 리액트 DOM을 포함한 모든 패키지를 업데이트해야 한다는 것을 잊지마세요. 리액트 네이티브는 0.59릴리즈에서부터 Hooks를 지원합니다.
비디오 소개
2018년 리액트 컨퍼런스에서, Sophie Albert와 Dan Abramov는 Hooks를 소개했고, 이어서 Ryan Florence는 그것을 사용해서 어플리케이션을 어떻게 리팩토링해야하는지에 대해서 설명했습니다. 여기에서 비디오를 확인하세요:
코드를 깨뜨리는 변화사항은 없습니다
이야기를 이어나가기 전에, Hooks에 대한 참고사항이 있습니다:
- Hooks는 완전히 받아들입니다. 기존 코드를 다시 작성하는 일 없이 몇 개의 컴포넌트에 Hooks를 적용할 수 있습니다. 그러나 당장 Hooks를 배우거나 사용하지 않아도 됩니다.
- Hooks는 100% 역으로 호환이 됩니다. Hooks는 코드를 깨뜨리는 어떤 변화도 포함하지 않습니다.
- Hooks를 당장 사용할 수 있습니다. Hooks는 현재 16.8.0버전의 릴리즈로 사용가능합니다.
리액트에서 클래스를 제거할 계획은 없습니다. 이 페이지의 아래에 있는 섹션에서 Hooks를 위한 점진적인 채택 전략에 대해서 읽어보실 수 있습니다.
Hooks는 리액트 개념의 지식을 대체하지 않습니다. 대신에, Hooks는 props, state, context, refs, 생명주기와 같이 이미 알고 있는 리액트 개념에 대한 좀 더 직접적인 API를 제공합니다. 후에 보여드릴 것이지만, Hooks는 위의 개념들을 합칠 수 있는 새롭고 강력한 방법을 제공합니다.
단지 Hooks를 배우고 싶으신거라면 다음 페이지로 바로 넘어가셔도 됩니다! 왜 Hooks가 추가된 건지, 또 어플리케이션을 다시 작성하지 않고도 Hooks를 사용할 수 있는 방법에 대해서 더 알고 싶으시다면 계속 이 페이지를 읽으시면 됩니다.
동기
Hooks는 우리가 5년간 컴포넌트를 작성하고 유지하는데 마주친 수 만개의 연관이 없어보이던 문제를 해결했습니다. React를 배우고 있는 중이든, 매일 사용하든, 심지어 비슷한 컴포넌트 모델에 다른 라이브러리를 선호한다면, 이러한 문제들을 인식할 수 있을 것입니다.
컴포넌트 사이에서 state 로직을 재사용하는 것은 어렵습니다
리액트는 컴포넌트에 재사용할 수 있는 로직을 더하는 방법을 제공하지 않습니다. (예를 들어, store에 컴포넌트를 연결하는 로직) 리액트로 오랫동안 일을 했었다면, props 렌더링이나 하이어오더 컴포넌트와 같은 패턴을 통해서 이러한 문제를 해결하는데 익숙할 것입니다. 하지만 이러한 패턴은 컴포넌트를 사용할 때 컴포넌트를 재조직할 것을 요구하며, 이것은 번거로울 수 있는데다가 코드를 따라가기 어렵게 만듭니다. 리액트 개발자 도구로 전형적인 리액트 어플리케이션을 보면 제공하는 컴포넌트, 사용하는 컴포넌트, 하이어오더 컴포넌트, props 렌더링, 그리고 다른 추상화의 층에 둘러싸인 컴포넌트들의 "지옥의 감싸기(wrapper hell)"를 쉽게 발견할 수 있을 것입니다. 이러한 컴포넌트들을 개발자도구로 필터링하는 것이 가능하지만, 이것은 더 깊은 골치아픈 문제를 지적하게 되죠 : 리액트는 state 로직을 공유하기 위한 더 나은 기초 요소가 필요하다는 것을요.
Hooks를 사용하면, 컴포넌트에서 state 로직을 추출할 수 있기 때문에 컴포트를 독립적으로 테스팅하고 재사용하는 것이 가능합니다. Hooks는 컴포넌트 계층을 바꾸지 않으면서 state 로직을 재사용할 수 있게 합니다. 이것은 많은 컴포넌트 사이에서 혹은 커뮤니티를 통해서 Hooks를 공유하는 것을 쉽게 만들죠.
이것에 대해서는 당신만의 Hooks를 구축하는 것 문서에서 더 심도있게 다뤄볼 것입니다.
복잡한 컴포넌트는 이해하기 어렵습니다
가끔 간단하게 시작했지만 state 로직이 관리할 수 없을 정도로 엉망이 된 컴포넌트를 유지보수하는 것을 경험해본 적이 있을 것입니다. 각 생명주기 메소드에는 전혀 관계가 없는 로직이 뒤섞여들어가기도 했죠. 예를 들어 컴포넌트는 componentDidMount와 componentDidUpdate에서 데이터를 불러옵니다. 그러나 componentDidMount 메소드는 이벤트 리스너로 세팅된 관련없는 로직을 포함하기도 하며componentWillUnmount에서 cleanup 로직을 수행하기도 합니다. 상호간의 함께 변경되는 연관된 코드는 분리되지만, 완전히 연관없는 코드는 결국 단일 메소드로 결합됩니다. 이것은 버그가 쉽게 발생하고 무결성을 해치는 원인이 됩니다.
많은 경우, state 로직은 컴포넌트 전반에 퍼져있기 때문에 컴포넌트들이 작게 쪼개지는 것은 불가능합니다. 그것들을 테스트하는 것 또한 매우 어렵죠. 이 때문에 많은 사용자들은 React를 분리된 state 관리 라이브러리와 함께 사용하는 것을 선호했습니다. 그러나 그 방법은 종종 과도한 추상화를 일으키고, 다른 파일들 사이에서 건너뛰는 것을 요구하며, 컴포넌트를 재사용하는 것을 더욱 어렵게 만들곤 했습니다.
이것을 해결하기 위해서 Hooks는 하나의 컴포넌트를 연관된 부분의 묶음으로 구성된 작은 함수들로 나눌 수 있게합니다.(구독을 설정하거나 데이터를 불러오는 것과 같은) 생명주기 함수에 기반에서 나누는 것을 강요하기보다는 말이죠. reducer와 함께 컴포넌트의 로컬 state를 관리하는 것도 가능하며 이것은 state를 더 쉽게 예측하게 합니다.
이것에 대해서는 Effect Hook 사용하기문서에서 더 심도있게 다뤄볼 것입니다.
클래스는 사람과 기계를 모두 헷갈리게 합니다
클래스는 코드 재사용과 코드 조직을 더 어렵게 만들 뿐만 아니라 리액트를 배우는데 큰 장벽입니다. this가 자바스크립트에서 어떻게 동작하는지 이해해야 하는데, 자바스크립트에서는 대부분의 다른 언어에서와는 다르게 동작한다는 것이 문제죠. 이벤트 핸들러를 묶어(bind)줘야 한다는 것을 기억해야 합니다. 사용자들은 props, state, 하향식 데이터 흐름은 완벽하게 이해하지만 클래스를 이해하는 것에는 여전히 어려움을 겪습니다. 리액트에서 함수와 클래스 컴포넌트의 구별과 각각을 언제 사용해야하는지는 심지어 실력있는 리액트 개발자 사이에서도 의견이 일치하지 않습니다.
더하여, 리액트가 세상에 나온지 5년이 되었음에도 5년 뒤에도 지금과 같이 널리 이용되길 바랍니다. Svelte, Angular, Glimmer 등에서와 같이, 컴포넌트의 AOT 컴파일 기능은 높은 잠재력을 가지고 있습니다. 특히 템플릿에 한정되지 않다면 더욱 그렇습니다. 최근에, Preppack을 사용함으로서 컴포넌트 foliding을 실험했고 기대되는 초기 결과를 얻었습니다. 하지만 클래스 컴포넌트는 최적화를 더 느린 경로로 유도하는 의도적이지 않은 패턴을 유발하기도 합니다. 클래스는 최근 사용되는 도구에서도 문제를 일으킵니다. 예를 들어, 클래스는 잘 소형화되지 않고, 핫 로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 우리는 코드가 최적화된 경로에서 유지될 수 있는 API를 제공하고 싶었습니다.
이 문제를 해결하기 위해 Hooks가 클래스를 사용하지 않고 더 많은 리액트의 기능을 사용할 수 있게 하였습니다. 개념적으로, 리액트 컴포넌트는 항상 함수에 더 가깝습니다. Hooks는 리액트의 실천 정신을 희생하지 않고 함수의 사용을 권장합니다. Hooks는 명령형 코드로 해결책을 찾을 수 있게 하고 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우는 것을 필요로 하지 않습니다.
예제
Hooks 한 눈에 보기문서는 Hooks를 배우는데 좋은 출발점이 될 수 있습니다.
점진적인 채택 전략
요약 : 리액트에서 클래스를 제거하기 위한 어떤 계획도 없다.
우리는 리액트 개발자는 프로덕트에 개발에 초점이 맞춰져 있으며 매일 릴리즈되는 새로운 API를 둘러볼 시간이 없다는 것을 알고 있습니다. Hooks는 매우 최신의 것이고, 그것을 배우거나 채택하는 것을 고려하기 앞서서 더 많은 예시와 튜토리얼을 기다리는 것이 더 나을 것이라고 생각할 수도 있습니다.
우리는 또한 리액트에 추가되는 새로운 기능에 대한 기준점이 매우 높다는 것 또한 이해합니다. 호기심이 많은 독자에게는 더 자세한 동기를 알 수 있게 하는 detailed RFC문서를 준비했고, 이것은 이전의 관련된 작품과 구체적인 디자인 결정에 대한 추가적인 관점을 제공합니다.
결정적으로, Hooks는 기존의 코드와 나란히 작동하기 때문에 점진적으로 채택하는 것이 가능합니다. Hooks로 성급하게 갈아탈 필요가 없습니다. 기존에 사용중인 존재하는 복잡한 클래스 컴포넌트에 대한 "큰 리팩토링"을 피하는 것을 권장합니다. "Hooks를 적용하기"를 시작하기 위해 마음을 먹는 것은 시간이 걸릴 수 있습니다. 새로운 Hooks를 중요하지 않은 컴포넌트에 적용하는 것을 먼저 연습해보는 것이 최고입니다. 그 후 팀원 모두가 Hooks 사용에 안정감을 느끼고 있는지 확인하세요. Hooks를 시도해본 후에 긍정적인 의견이든 부정적인 의견이든 자유롭게 피드백을 보내주세요.
우리는 클래스에 대해서 존재하는 모든 사용 경험들을 Hooks로 대체할 수 있기를 희망하지만, 예견할 수 있는 미래까지 클래스 컴포넌트를 지원할 것입니다. 페이스북에서는 클래스로 작성된 수많은 컴포넌트들을 가지고 있고, 그것을 다시 작성할 계획은 절대 없습니다. 대신에 새로운 코드들은 클래스들과 나란히 Hooks를 사용하여 작성하고 있습니다.
자주 질문해주세요
우리는 Hooks에 대한 가장 많이 나오는 질문들에 대한 답을 Hooks FAQ 페이지문서에 준비해 두었습니다.
다음 단계
이 페이지를 마치면서, 당신은 Hooks가 해결하려는 문제에 대한 대략적인 개념은 이해하셔야 하지만 아직 구체적인 부분은 명확하지 않을 것입니다. 그러나 걱정하지 마세요! 이제 다음 페이지로 넘어가서 예제 코드와 함께 Hooks를 배워봅시다
