24.02.01 (목)
학습구간 및 정리본
질문과 답변
1. useRef
❓ useRef의 여러가지 특성
본문에서는 useRef가 자식 컴포넌트를 저장하는 변수로 활용할 수 있을 뿐만 아니라 다른 방식으로도 유용하게 사용할 수 있다고 하였습니다.
어떤 방식으로 사용할 수 있는지 답변해주세요.
나의 답변
리렌더링 방지
useState나useReducer와 같은 상태 관리 훅을 사용할 때, 상태가 변경되면 컴포넌트는 재렌더링됩니다.
하지만useRef로 관리되는 변수의 값이 변경되어도 리액트는 컴포넌트를 재렌더링하지 않습니다. 이는 성능 최적화에 유용하게 사용될 수 있습니다.즉시 값 조회
useState는 상태를 설정한 후, 그 상태가 업데이트되고 컴포넌트가 재렌더링된 후에야 변경된 상태를 조회할 수 있는 반면에useRef는 값을 설정하면 바로 그 값을 조회할 수 있어 동기적으로 데이터를 다루는 데 유리합니다.본문에서는 위의 두 가지 방식을 언급하고 있으며, 이외에도 아래와 같은 여러 방식으로 유용하게 사용할 수 있습니다.
DOM 요소 직접 접근
useRef는 특정 DOM 요소에 직접 접근하는 데 사용될 수 있습니다.
예를 들어, 특정 입력 필드에 포커스를 설정하거나, DOM 요소의 크기나 위치를 직접 읽어야 할 때 유용합니다.이전 상태나 props의 값을 저장
useRef는 컴포넌트가 재렌더링될 때 이전 상태나 props의 값을 저장하는 데에도 사용할 수 있습니다.
이는 현재 값과 이전 값을 비교해야 할 때 유용합니다.계산된 값 캐싱
복잡한 계산이나 비용이 많이 드는 연산의 결과를 저장하기 위해
useRef를 사용할 수 있습니다.
이렇게 하면 다음 렌더링 때 동일한 계산을 다시 수행할 필요가 없어 성능을 향상시킬 수 있습니다.커스텀 훅에서의 인스턴스 변수
useRef는 커스텀 훅 내에서 일종의 인스턴스 변수처럼 사용될 수 있습니다.
이는 컴포넌트 간에 상태를 공유하지 않으면서도 훅 내부에서 일관된 상태를 유지할 수 있게 해줍니다.타이머 ID 저장
setTimeout이나setInterval과 같은 타이머 함수들의 ID를 저장하는 데에useRef를 사용할 수 있으며, 이를 통해 컴포넌트가 언마운트될 때 타이머를 취소할 수 있습니다.
2. 리액트 훅
❓ 리액트 훅을 안전하게 사용하기 위해 준수해야 할 규칙에 대해 서술해주세요.
본문에서는 리액트 훅을 안전하게 사용하기 위해 2가지 규칙을 지키도록 권장하고 있습니다.
어떤 규칙이 있는지 서술하고, 본인만의 리액트 훅을 안전하게 사용할 수 있는 규칙이 있다면 자유롭게 얘기해주세요.
나의 답변
1. 훅은 항상 최상위 레벨에서 호출되어야 한다.
조건문, 반복문, 중첩 함수, 클래스 등의 내부에서는 훅을 호출하지 않아야 하며, 반환문으로 함수 컴포넌트가 종료되거나 조건문 또는 변수에 따라 반복문 등으로 훅의 호출여부가 결정되어서는 안됩니다.
그래야
useState나useEffect가 여러 번 호출되더라도 훅의 상태를 올바르게 유지할 수 있게되기 때문입니다.2. 훅은 항상 함수 컴포넌트다 커스텀 훅 등의 리액트 컴포넌트 내에서만 호출되어야 한다.
리액트에서 훅은 호출 순서에 의존합니다. 모든 컴포넌트 렌더링에서 훅의 순서가 항상 동일하게 유지되어야 하며, 이를 통해 항상 동일한 컴포넌트 렌더링이 보장됩니다.
3. 함수형 컴포넌트와 클래스형 컴포넌트
❓ 함수형 컴포넌트에서 클래스형 컴포넌트의 역할을 수행하는 훅들은 무엇인가요?
클래스형 컴포넌트에서 제공하는 기능을 리액트 훅의 도입으로 함수형 컴포넌트에서도 다룰 수 있게 되었는데요.
기존 클래스형 컴포넌트에서 제공하던 기능들의 역할을 하는 리액트 훅을 밑에 제시된 설명과 매치하여 작성해주세요.
A. 컴포넌트의 생명주기와 관련된 작업을 수행하는 훅
B. 특정한 비즈니스 로직을 재사용하기 위해 사용자가 만들 수 있는 훅
C. 사이드 이펙트를 다루기 위해 사용되는 훅
D. 컴포넌트 내에서 상태를 추가하고 관리하는 데 사용되는 훅
나의 답변
A : useEffect, useLayoutEffect
B : 커스텀 훅
C : useEffect
D : useState
추가 논의
사이드 이펙트
이번 챕터에서는 "사이드 이펙트를 다루기 위해 사용하는 훅은 useEffect다." 라는 문장이 논의거리가 되었다.
React에서의 사이드 이펙트란 무엇인가?
💊 side-effect = 부작용
프로그래밍에서의 side-effect
함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 사이드 이펙트라고 한다.
이런 외부와의 상호작용은 프로그래밍의 다른 부분에 영향을 미칠 수 있다.
React에서의 side-effect
React의 렌더링 흐름에 영향을 줄 수 있는, React 자체 제공 기능이 아닌 모든 외부 기능을 사용하는 행위를 포함한다.
외부 기능의 예시
- fetch() 메서드 등을 통한 네트워크 통신 요청 행위
- Local Storage 등에 데이터를 저장하는 행위
- DOM을 직접 조작하는 행위
- setTimeout, setInterval 등의 타이머를 설정하는 행위
React에서 side-effect를 다루기 위해 사용하는 훅 : useEffect
사이드 이펙트가 React 컴포넌트 내부에서 발생하면 React 컴포넌트 렌더링에 예상치 못한 영향(side-effect)를 미칠 수 있다.
그렇기때문에 컴포넌트 내부에서 직접적으로 사용하지 않고, 렌더링이 완료된 후 수행되는 useEffect 안에서 사이드 이펙트를 사용한다.
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data'); // side-effect
const result = await response.json();
setData(result);
};
fetchData();
}, []);정리하자면
useEffect는 React 컴포넌트 렌더링에 영향을 미치지 않으면서 React 외부의 기능을 사용할 때 사용되는 훅이다.
