[2024. 12. 2] 회고 및 타이머 관리

👊🏻 작업 계획 React로 회고를 위한 사이트를 만들어보기 코드 하나하나를 뜯어 상세히 이해하고 회고를 위한 사이트 구성 React의 주요 훅들에 대해 디깅하기 useState, useEffect 등 기본 훅부터 useMemo, useCallback 같은 고급 훅의 사용법까지 조금이라도 이해하기 React에서 타이머 구현에 사용된 setInterval과 관련된 동작 원리 이해하기

👊🏻 잘한 일 각 컴포넌트를 세부적으로 작성하며 코드 하나하나를 상세히 이해하고 분석 React로 CRUD와 타이머 기능 구현(클론으로 예습해보기)

👊🏻 문제 파악과 해결 과정

문제 상황 React 프로젝트에서 컴포넌트가 브라우저와 연결되지 않는 문제가 발생 코드는 정상적으로 작성되었지만, 컴포넌트 파일이 로드되지 않아서 예상대로 작동하지 않았음...ㅠ

문제 원인 문제를 확인해보니, 파일명에 띄어쓰기가 포함되어 있었던 게 원인

원래 파일명: compenents (띄어쓰기 있음) 올바른 파일명: components (띄어쓰기 없음)

React는 파일 경로를 매우 엄격하게 처리하기 때문에, 이런 작은 오타나 경로 오류도 컴포넌트 로드 실패로 이어질 수 있다는 것을 깨달았다.

👊🏻 내일 할 일 CSS 통합 관리 방안을 고려하여 UI 개선 CRUD와 타이머 기능 구현

📚 공부하면서 배운 점

React의 HOOK

useEffect 부수효과(Side Effects)를 처리하기 위한 Hook. EX) 데이터 가져오기(fetch), 이벤트 리스너 등록, DOM 업데이트 기본적으로 마운트, 업데이트, 언마운트 단계에서 동작하며, 의존성 배열을 통해 실행 시점을 제어할 수 있다.

React의 생명주기: 마운트, 업데이트, 언마운트

1️⃣ 마운트의 원리 외부 API 호출: 데이터를 가져와 상태에 저장하거나 초기 화면에 표시한다.

useEffect(() => {
  fetch('https://api.example.com/data')
    .then((res) => res.json())
    .then((data) => console.log(data)); // 마운트 시 1회 실행
}, []);

➡️ fetch란? fetch는 JavaScript에서 서버와 통신하기 위해 사용하는 함수로, 주로 HTTP 요청(데이터 가져오기, 보내기)을 처리하는 데 사용된다. 웹 브라우저 내장 함수로 제공되며, 데이터를 가져오거나 서버와 상호작용할 때 사용된다. url: 요청할 서버의 URL (필수).

2️⃣ 업데이트 조건부 렌더링 -> 상태나 속성에 따라 UI를 다르게 보여준다.

예시

<ul>
  {tasks[time]?.length > 0 ? (
    tasks[time].map((task, index) => (
      <li key={index}>{task}</li>
    ))
  ) : (
    <p>할 일이 없습니다!</p>
  )}
</ul>

<div>
  {savedNotes[`${time}-${index}`] ? (
    <p>메모: {savedNotes[`${time}-${index}`]}</p>
  ) : (
    <p>메모가 없습니다.</p>
  )}
</div>

▶️ 조건부 렌더링이 필요한 이유 조건부 렌더링은 필요한 데이터나 상태에 따라 UI를 다르게 보여주기 위해 사용된다. 조건부 렌더링은 유저 경험을 개선하고, 불필요한 UI 요소를 제거하는 데 유용

3️⃣ 언마운트

공부하면서 어려웠던 부분

setInterval과 clearInterval의 원리 setInterval const intervalId = setInterval(callback, delay); 지정한 시간 간격(delay)마다 callback 함수가 반복 실행된다. 반복 실행은 자동으로 멈추지 않기 때문에 필요 시 종료해야 한다.

clearInterval로 타이머 중단하기 setInterval로 설정된 작업을 중단하려면 clearInterval(intervalId)를 호출해야 한다. 메모리 누수 방지 및 불필요한 작업 중단이 가능하다.

jennyhw0122 / react

[2024. 12. 2] 회고 및 타이머 관리 #1