리액트... 넌 나에게 모욕감을 줬어

• React Hooks (useState, useEffect): 상태 관리의 기본. 이제 class 컴포넌트는 안 쓴다고 함.

• 비동기 통신 (axios): 서버에서 데이터를 가져올 때 fetch보다 훨씬 편함.

• 구조 분해 할당: const { name, age } = user; 처럼 코드를 짧게 줄이는 자바스크립트 문법.

[문제 상황] 서버에서 영화 리스트(JSON)를 받아와서 화면에 뿌려주는 기능을 만드는데, 새로고침만 하면 화면이 하얗게 변하면서 에러가 뜸. 콘솔 창에는 Uncaught TypeError: Cannot read properties of undefined (reading 'map')라는 빨간 글씨만 가득함.

[시도한 방법]

1. 1. 오타 확인: map 함수 스펠링 문제인가 싶어서 다시 침. (여전함)

2. 2.console.log(data)를 찍어봄: 처음엔 undefined가 떴다가 나~중에 데이터가 들어옴.

[최종 해결] 범인은 '타이밍'이었음. 리액트는 화면을 먼저 그리고(Render), 그 뒤에 데이터를 가져오는데(Effect), 데이터가 오기도 전에 빈 깡통(undefined)에다가 map을 돌리니 에러가 난 것임. data && data.map(...) 처럼 조건부 렌더링을 걸어주거나, 초기값을 빈 배열 useState([])로 설정해서 해결함.

HTML/CSS 할 때까지만 해도 다들 웃고 떠들었는데, 자바스크립트 로직 들어가니까 교실이 독서실처럼 조용해짐. 이번 주 팀 프로젝트로 '넷플릭스 메인화면 클론 코딩'을 시작했는데, 디자이너 친구랑 CSS 1픽셀 때문에 30분 토론함. 그래도 결과물이 눈에 바로 보이니까 백엔드보단 재밌는 듯?

• 1.리덕스(Redux) 개념 이해하기 (상태 관리가 뭔지 아직 감이 안 옴)

• 2.팀 프로젝트 반응형 디자인(모바일 뷰) 깨지는 것 수정하기