리액트 프로젝트를 겪으며 느낀 점은 훅(Hook)의 개념이다. 쉽게 이해가 될 듯 하면서도 돌아서면 잊어버리도 난해해진다. 그럼에도 기억에 남는 것이 있다면 useState와 useEffect 그리고 useCallback 정도이다. 아마도 자주 보게되니 기억에 남은 모양이지만, 기억에만 남았을 뿐 이것을 어떻게 사용하는지도 지금도 헷갈린다. 개인적으로 그냥 웹이 좋지만, 대세는 리액트( React )와 플러터( Flutter )이니 따라갈 수 밖에 없는 듯하다. 이렇게 된거 공부하는 김에 Hook에 대해 공부해 보고자 한다.
리액트 훅이란 뜻과 종류 / React Hook
리액트를 다루면서 훅( Hook )이란 존재를 자주보게 된다.
훅에 대한 내용을 찾아보면 리액트의 상태관리와 생명주기를 다루는 내용이 가득하다.
프로그램의 생명주기는 대략 알겠는데, 리액트에서 관리하는 상태와 생명주기가 무엇인지 궁금해 진다.
필요하니 만들었고, 만들었으니 사용되고 있겠지만 말이다.
모든 프로그래밍 언어가 그렇듯 전부 사용할 일은 없겠지만, 리액트를 하려면 어쨌든 알아야 하니 어쩔 수 없다.
그렇다면 여기서 대략 궁금해지는 것은 상태관리와 생명주기가 되겠다.
리액트 상태관리란
상태관리가 무엇인지 찾아보자.
컴포넌트( Componet )와 데이터 ( Data )에 대한 얘기가 많을 것이다.
이것만 봐서는 뭐가 뭔지 난해할 뿐이지만, 컴포넌트는 동작하는 작은 코드, 데이터는 그냥 자료 정도로만 이해하자.
리액트를 공부해 본 사람이라면 컴포넌트와 데이터가 무엇인지 대략 감이 온다.
조금 원론적으로 접근해 보자.
모든 프로그램은 작은 단위의 컴포넌트들로 이루어져 있고, 컴포넌트들은 함수와 메서드 등으로 구성되어 있으며, 이들은 데이터의 입력과 출력을 통해 동작한다.
리액트는 이런 컴포넌트와 컴포넌트에서 동작하기 위한 데이터를 관리한다.
데이터는 정적으로 고정일 수도 있고, 동적으로 변경될 수도 있으며, 아에 사용하지 않을 수도 있다.
컴포넌트에 입력된 데이터는 저장될 것이고, 변경될 것이며, 이에 따라 화면에 보여지는 컴포넌트는 다시 표현될 것이다.
컴포넌트가 화면에서 다시 그려지는 것을 렌더링이라 한다.
자동차의 계기판을 생각해 보자.
속도계와 속도를 표현하는 바늘은 컴포넌트이며, 자동차가 움직일 때의 속도는 데이터가 된다.
자동차의 속도가 올라가고 내려갈 수록, 속도계의 계기판은 움직이게 된다.
이것을 리액트의 관점에서 본다면 다음과 같다.
자동차의 속도는 데이터가 되고, 이를 통해 변화하며 보여주는 속도계는 컴포넌트가 된다.
다시 리액트로 돌아오자.
어떤 데이터가 컴포넌트에 입력되면 데이터는 컴포넌트에 저장되고 컴포넌트는 화면을 다시 그리는 렌더링을 통해 화면에 적절한 데이터를 표현할 것이다.
이런 일련의 과정의 리액트의 상태관리가 된다.
웹화면이나 또는 스마트폰에 보여주는 초시계를 생각하면 된다.
{ 초시계 : 컴포넌트, 숫자 : 데이터 } 요것을 리액트가 관리하면 리액트 상태관리
리액트 생명주기
훅( Hook ) 종류
- useState: 컴포넌트 내에서 상태를 추가하고 관리할 때 사용해.
- useEffect: 사이드 이펙트(예: 데이터 가져오기, 구독 설정/해제)를 관리할 때 사용해.
- useContext: React 컨텍스트 API를 사용하여 컴포넌트 트리에서 데이터를 전달할 때 사용해.
- useReducer: 상태 업데이트 로직이 복잡할 때, 리듀서를 사용하여 상태를 관리해.
- useCallback: 콜백 함수를 메모이제이션하여 성능을 최적화할 때 사용해.
- useMemo: 값 계산 결과를 메모이제이션하여 성능을 최적화할 때 사용해.
- useRef: DOM 요소에 접근하거나, 다른 값의 참조를 유지할 때 사용해.
- useLayoutEffect: DOM 변화를 읽고 동기화할 때 사용해.
- useDebugValue: 사용자 정의 훅을 디버깅할 때 레이블을 설정해.
댓글