[오픈미션] 리액트 공부 3

서비스를 구현하면서 추가 공부한 내용입니다.

---

useState

리액트에서 “변하는 값”을 관리하는 기능.

const [timeLeft, setTimeLeft] = useState(7000);

• timeLeft = 현재 값
• setTimeLeft = 값을 변경하는 함수
• setState가 호출되면 컴포넌트가 다시 렌더링됨

---

useRef

렌더링과 상관없이 값을 유지하는 저장소.

• 값 변경해도 렌더링되지 않음
• 렌더링해도 값이 유지됨
• 보통 setInterval ID, DOM 요소, 이전 값 저장 등에 사용

const timeRef = useRef(null);

---

useEffect

“특정 상황에서 실행되는 코드”를 넣는 공간.

useEffect(() => {
    console.log("마운트된 후 실행");
}, []);

의존성 배열(deps)에 따라 다음이 결정됨

deps	실행 시기
[]	처음 1번만 실행
[state]	state 값이 바뀔 때마다 실행
없음	모든 렌더링 이후 실행

 

useEffect(() => {
    // interval 생성
}, []);

→ 한 번만 실행됨

→ interval이 중복 생성되는 문제를 완전히 제거함

---

useCallback

함수를 메모이징하는 훅.

const capture = useCallback(() => {...}, [webcamRef]);

• deps 안의 값이 바뀌지 않으면 ‘같은 함수’로 취급됨
• 렌더링 때마다 함수가 새로 만들어지는걸 막아줌
• 자식 컴포넌트에 props로 넘길 때 성능 최적화됨

---

setInterval과 clearInterval

setInterval

setInterval(() => {
    console.log("1초마다 실행");
}, 1000);

• 일정 시간이 지날 때마다 함수를 반복 실행
• 리턴값은 interval ID (숫자)

---

clearInterval

clearInterval(intervalID);

• setInterval로 만든 반복 타이머를 종료
• 정확한 “interval ID”가 필요함
• → 그래서 useRef로 그 ID를 저장해두는 것