Hook #50
Replies: 1 comment
-
A. 16.8 버전부터 추가된 개념으로 클래스 컴포넌트에서 발생하는 상태 로직 재사용과 복잡한 라이프 사이클 메서드로 인해 새롭게 등장했던 메커니즘 입니다. 해당 개념을 통해 함수형 컴포넌트를 본격적으로 사용하기 시작하게 된 계기가 되었으며 이를 통해 기존 문제들을 해결할 수 있었습니다.
A. 상태 로직의 경우 클래스 컴포넌트에선 render props나 고차 컴포넌트 형태로 재사용하곤 했지만 이로 인해 코드의 일관성이 깨지는 문제가 있었습니다. 이런 다양한 기법들을 함수형 컴포넌트에선 hook만 사용하여 일관성을 보장할 수 있습니다. 또한, componentDidMount나 componentdidUpdate와 같은 다양한 라이프 사이클 메서드를 useEffect라는 하나의 hook으로 관리할 수 있습니다.
A. useEffect란 컴포넌트에서 부수 효과를 처리하기 위한 hook 입니다. 이 때, 부수 효과는 외부 시스템(dom 조작, 데이터 패칭 등)과 동기화 하는 목적으로써 처리 되는 작업들입니다. 이 훅의 실행 시점은 컴포넌트가 렌더링 되어, 화면에 그려진 이후 실행 됩니다. useEffect는 크게 2개의 인자를 받으며 첫번째론 부수 효과 로직들과 클린업 함수를 처리하기 위한 setup 함수와 의존성 배열을 받고 있습니다.
A. useEffect에 의존성 배열이 없는 경우 컴포넌트가 매 렌더링 마다 hook 내 setup 함수가 실행하게 됩니다. 의존성 배열이 빈 배열인 경우 컴포넌트가 렌더링 된 단 한번만 실행하게 됩니다. 특정 변수가 있는 경우 그 변수의 값이 변경될 때마다 실행하게 됩니다.
A. useEffect와 useLayoutEffect는 실행 시점이 서로 다릅니다. useEffect의 경우 컴포넌트가 화면에 그려진 이후 실행 되는 반면, useLayoutEffect의 경우 브라우저에 페인팅 되기 전 실행 됩니다. 이로 인해, 페인팅 되기 전 레이아웃 계산이 필요한 툴팁 컴포넌트 등에 주로 활용됩니다.
A. useCallback은 특정 함수에 대해 메모이제이션이 필요한 경우, useMemo는 특정 값에 대해 메모이제이션이 필요한 경우 사용할 수 있는 hook 입니다.
A. useCallback의 경우 주로 자식 컴포넌트에 콜백 함수를 props로 전달할 때 불필요한 리렌더링을 방지하거나, setState로직이 포함된 useEffect의 의존성 배열에 포함되는 함수인 경우 사용합니다. 또한, useMemo의 경우 값비싼 연산을 하여 값이 도출되는 경우 주로 사용 되는 훅입니다.
A. useCallback을 사용하는 경우 의존성 배열의 값이 변경되는 경우에만 해당 함수 참조를 반환하게 됩니다. 반면 useCallback으로 감싸지 않은 경우 컴포넌트의 매 렌더링마다 새로운 함수가 생성되어 함수의 참조가 변경됩니다.
A. 리액트 컴포넌트에서 특정 정보를 기억해야하지만 해당 정보가 렌더링을 발생시키지 않아야할 경우, 특정 dom에 접근하여 직접 dom api를 조작해야하는 경우 ref를 사용할 수 있습니다.
A. 다양한 관점에서 ref를 많이 사용했던거 같습니다. 특정 값을 기억해야할 경우는 toast에서 시간 설정을 하는 과정에서 유용하게 사용했었습니다. 시간 설정을 할 때 setTimeout api를 사용하게 되는데, timeout을 설정했다면 이 메모리 누수를 방지하기 위해 clearTimeout도 함께 사용해야했습니다. 만약 이 값을 전역 변수로 설정한다면 컴포넌트가 리렌더링이 발생했을 때, 그 정보가 사라지게 되어 예상치 못한 동작을 경험해야했지만, 이 정보를 ref로 관리함으로써 컴포넌트가 리렌더링 되더라도 timeout 정보를 기억하기 때문에 유용하게 사용했던 경험이 있습니다.
A. custom hook은 크게 2가지 관점에서 사용하고 있습니다. 첫번째는 컴포넌트의 책임 분리 입니다. 컴포넌트는 크게 ui, 인터렉션, 비즈니스 로직으로 구성되어있다고 생각하는데, 컴포넌트 내에선 ui가 변경될 때만 변경되는 것을 가장 중점적으로 보고 있습니다. 따라서, 이 외 로직은 최대한 분리하려고 하는데 이 때, 비즈니스 로직과 인터렉션을 custom hook을 통해 분리하고 있습니다. 마지막으로 로직의 단일 책임을 준수하기 위해 custom hook을 사용하고 있습니다. 각 hook이 하나의 역할을 가질 때, hook을 확장한 새로운 hook을 만드는 등 재사용성도 높일 수 있으며 무엇보다 그 hook이 어떤 기능을 하는지 다른 이들이 봐도 명확히 인지할 수 있다는 장점이 있습니다. |
Beta Was this translation helpful? Give feedback.
-
Q1. react의 hooks에 대해 설명해주세요.
Q1-1. 기존에 있던 문제들을 hooks를 통해 어떻게 해결할 수 있었나요?
Q2. useEffect에 대해 설명해주세요.
Q2-1. useEffect에 의존성 배열이 없는 경우, 의존성 배열이 빈 배열인 경우, 의존성 배열에 특정 변수가 있는 경우 각각 어떻게 동작하는지 말해주세요.
Q2-2. useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
Q3. useCallback과 useMemo에 대해 설명해주세요.
Q3-1. useCallback과 useMemo는 어떤 경우에서 주로 사용했는지 말해주세요.
Q3-2. useCallback을 사용할 때와 사용하지 않고 함수를 선언할 때의 차이점에 대해 말해주세요.
Q4. ref에 대해 설명해주세요.
Q4-1. ref를 사용해본 경험에 대해 말해주시고 어떤 점에서 유용함을 느끼게 되었나요?
Q5. custom hook을 만들어본 경험이 있다면 어떤 상황에서 주로 사용했는지 말해주세요.
Beta Was this translation helpful? Give feedback.
All reactions