[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프_프론트엔드(리액트) 19일차 - 리액트 기초2 과제 : 대기모드 화면 웹사이트 React로 재구현

결과 페이지 접속 : https://nanhimang.github.io/udemy-nanhimange2/index.html

---

1) 과제 요구사항

1. React를 이용하여 배경이미지 랜덤 변경
2. React를 이용하여 인사 만들기
3. React를 이용하여 시계 만들기

• 중요사항
  setInterval 사용 시 무한루프에 주의,
  비동기처리 문제가 발생하지 않도록 컴포넌트 구성
  
  

2) 코드작성

setInterval을 useEffect를 이용해 App.js에 배치하여 초기 렌더링시 1번만 실행되도록 구현하였다. 또한 useState 함수의 중첩으로 인한 무한루프 발생을 막기 위해 useEffect와 useRef 함수를 사용하였다.

3) 결과 (gif)

위의 gif는 실제 코드실행 화면을 5초간 캡쳐하여 랜더링한 것이다. 기본적으로 시간이 초단위까지 표시되며, 10초마다 이미지가 랜덤으로 표출된다.

4) 과제 회고(느낀점)

컴포넌트를 어떻게 설계해야 코드 재사용성을 높이고 과부화를 최소화할지 고민하는 계기가 되었다. 사실 아직은 React의 구동 원리를 정확히 이해하지 않았기 때문에 데이터 처리 작업을 App 컴포넌트에 집중화시키는 것이 맞는지, 혹은 각 하위 컴포넌트에 분산시키는 것이 맞는지 잘 감이 오지 않는다.
생각보다 useState를 활용하면서 무한루프 에러를 많이 겪었다. React 기능에는 useState 외에도 useRef, useEffect 등 다양한 함수들이 많이 존재하니 이를 공부할 필요성을 실감하게 되었다. 또한 아직은 맞닥뜨리지 않았지만, 비동기처리 문제를 최소화하기 위해 React의 구동 메커니즘을 이해할 필요성이 있음을 느꼈다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃
#IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
———————————————————————————————————————
본 후기는 유데미 x 스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지(B-log) 리뷰로 작성되었습니다.