React 기초
1.[React] #4 컴포넌트
\#4
2.[React] #5 CSS 작성법(module css)
\#5
3.[React] #6 이벤트 처리(Event Handling) - onClick, onChange
[React] #6 이벤트 처리(Event Handling) - onClick, onChange
4.[React] #7 state, useState -
컴포넌트는 상태의 값 변화를 인지함변수일 땐 값이 변해도 인지하지 못함상태는 상태값이 변할 경우 인지함
5.[React] #8 props
0:31 ~ 2:17전달받은 prop의 값을 변경시킬 수도 있다// state를 하나 더 만들면 된다// age의 초기값을 prop으로 설정2:28부모로부터 자식 컴포넌트에 전달한 props값은 only read만 가능하다자식이 부모의 props 값을 업데이트할 수 없
6.[React] #9
7.[React] #10
8.[React] #11 json-server, RestAPI
사용 이유 변경된 값을 DB에 저장하기 위해 json-server를 이용해 RestfulAPI 만들어보기 → DB에 값을 저장하는 이유 : 페이지를 벗어나든,브라우저 새로고침을 하든, pc를 껐다 켜든 값이 계속 유지된다. > ### TIP 💡 리액트 서버 실행중
9.[React] #12 useEffect, fetch()로 API 호출
DayList.js 파일과 Days.js 파일에 있는 useEffect 함수의 코드가 유사하다.우리가 직접 커스텀훅을 만들어, 간단한 재사용만으로도 사용해볼 수 있다.
10.[React] #13 Custom Hooks
렌더링 후(화면에 요소들을 다 그린 후?)useEffect 내부 함수를 호출한다첫 번째 인자 callback 함수로 호출할 함수를,두 번째 인자 deps 자리의 배열에는 '지켜볼 값'을 넣어둔다.(의존성 배열)배열 안에 들어가있는 count가 변경될 때만 함수가 실행된
11.[React] #14 PUT(수정), DELETE(삭제)
(수강했으나 정리는 이후에)
12.[React] #15 POST(생성), useHistory()
(수강 완료. 이후 정리)
13.[React] #16 느린 통신 환경 대비하기
브라우저 Network에서 Slow 3G로 바꾸어 느린 환경 테스트 가능하다 화면에 Loading 출력하기 이런 식으로 추가해주면 된다 통신중에 버튼 클릭 방지 버튼을 여러번 누르는 경우, 통신중일 땐 버튼을 클릭할 수 없도록 state 추가해서 버튼 클릭 막기