Intro
유어클래스의 학습 콘텐츠를 다시 살펴보면서 리액트를 복습하는 중입니다. 섹션 3부터는 사실상 리액트가 아닌 백엔드에 관한 스택들을 배워왔기 때문에 꽤나 오랫동안 리액트를 멀리한 셈이죠. 다만 이력서를 준비하는 과정과 맞물리면서 밀도 높은 공부를 하지는 못했습니다. (29기 수료생 중에 벌써 취업자가 탄생했던데 누군지는 모르겠지만 축하드립니다. 대단하십니다 ㅠ_ㅠ)
오늘은 리액트에서 제공하는 Hook 이라는 기능에 대해 정리해보려고 합니다. 외워서 타인에게 설명하는 경험 만큼은 아니지만, 블로깅을 하면서 조금 더 세세하게 공부가 되는 타입이라서요. 공식 문서가 워낙에 잘 되어있으니 정확한 내용은 다음의 공식문서를 참고하시면 더욱 좋습니다.
useState Hook
섹션 1의 초반에 리액트, 특히 그 중에서도 상태(state) 를 공부하며 매우 당황스러웠던 기억이 있습니다. 유어클래스에서는 곧바로 useState 훅을 다뤘지만 공식 문서에서는 여전히 클래스 기반으로 설명하고 있었기 때문입니다. 지금 봐도 여전히 헷갈리는 부분이 있는데 부트캠프를 시작한지 30일, 많이 잡아줘도 60일이 채 되지 않은 뉴비가 그 차이점을 인지하고 필요한 부분만을 받아들이는 것은 불가능한 일이었죠.
공식문서는 훅을 다음과 같이 설명하고 있습니다.
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
useState 훅을 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다. 바꾸어 말하면 기존의 함수형 컴포넌트에서는 상태를 관리할 수 있는 방법이 없었다는 거죠. 공식문서에서 상태를 다루면서 갑자기 클래스형 컴포넌트로 전환해 설명한 이유도 여기에 있었던 겁니다.
이 점을 이해하고 나니 useState 훅을 소개하고 있는 공식문서의 내용이 왜 훅과 같은 기능을 하는 클래스의 예시로부터 시작하는지를 이해할 수 있게 되었습니다. (공식 문서가 바뀐 것은 아닌 것 같은데 왜 예전에는 지나쳤던 부분들이 이제야 보이는지 모르겠습니다..ㅎㅎ)
그리고 위의 공식 문서에서 클래스에 대한 부분을 걷어내고 나면, 함수형 컴포넌트 안에서 useState 훅을 어떻게 활용하면 되는지가 보다 더 분명해집니다. 공식문서의 예시를 참고하면 그 모양은 다음과 같습니다.
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
...useState Hook 은 state 변수와 state 변수를 변경할 수 있도록 하는 함수를 반환합니다. 위의 예시에서 count 가 state 변수, setCount 가 count state 변수를 변경하는 함수가 되는 것이죠. useState 의 괄호 안에 인자로 들어가는 값은 count 변수의 초기값이 됩니다. (다음의 링크(공식문서)에서 자세한 설명을 확인할 수 있습니다.)
outro
개인적으로 지식을 습득하는 과정이 계단식으로 동작한다고 느낄 때가 있습니다. 오늘처럼 갑자기 무언가가 조금 더 깊이 이해되는 과정을 경험할 때가 그렇습니다.
중요한 점은 이렇게 다음 계단으로 올라가는 경험이 있기 전을 버텨내는 것입니다. 한참동안 아무런 발전이 없는 듯한 느낌. 이것을 경험하는 것은 매우 지루하고 답답할 때가 많습니다. 당장 오늘만 해도 오랜만에 손에 잡은 리액트 공부가 진행이 잘 되지 않아 지금에라도 다시 백엔드로 방향을 틀어야 하는 건 아닌가 싶은 생각이 들었으니까요.
향후 어떻게 공부할지 그 계획까지 자신있게 블로깅했었습니다만.. 목표를 직접 설정해 공부하는 것이 쉽지만은 않다는 걸 느낍니다. 이력서를 마무리하고 나서 다시금 공부 모드를 잘 가동시켜야할 것 같네요. 오늘은 여기까지 하도록 하겠습니다.
