이번 주 목표
리액트 체크리스트 완벽히 이해하기
리액트 훅 공부하기
과제 (Lv.2 Lv.3) 달성하기
규칙
1. 억지로 쓰지 않기.
- 진짜 배운 게 있는 날만 쓰기!
2. 양 신경쓰지 않고 기록하기.
- 양이 적다고 글을 포기하지 말고 조금이라도, 그게 한두줄이더라도 배운 게 있다면 기록하기!
3. 꼭 내 것으로 만든 후 작성하기.
- 스스로 생각을 좀 정리해본 후 TIL 글 적기!
- 남이 쓴 글 복붙 X , 내가 배우고 느낀 점 위주로. (일단은 그렇게 해보자)
밑의 내용들은 내가 수업중에 메모해가며 적은것들이고 이를 통해 다시한번 공부가 되어 올렸으며 적으면서 복습이 되기 때문에 그날 공부한 것들은 안 외우더라도 매번 적을 예정입니다.
<오늘 공부 한 것들>
1. 지난 주 과제 리뷰하기
2. Styled 컴포넌트
3. React Hooks 공부
<인상 깊은 것들>
[React Hooks]
Hook: React에 도입된 기능으로 함수형 컴포넌트컴포넌트 간의 재사용성과 가독성에 도움을 주고 코드가 간결 해지고 상태 관리, Recap(리팩토링)처리에 도움을 준다.
[useState]
기존형 업데이트 방법
setNumber(number + 1);
setNumber(number + 1);
함수형 업데이트 방법
setNumber((currentNumber) => currentNumber + 1);
setNumber((currentNumber) => currentNumber + 1);
간단히 2번씩 비교해보면 기존형의 경우 업데이트의 증가는 1이고 함수형의 경우 2가 증가한다.
배치성으로 처리되어 업데이트 된다.
[useRef]
Ref: reference(참조)
ref의 값이 let처럼 변경 해도 사용이 가능하다.
Ref의 사용용도는 저장공간(state의 값 변화 발생), DOM(새로고침 됐을 경우 focusing) 방식이 있다.
[useContext]
useContext: 전역 상태 공유를 하는 훅
즉 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할때 발생하는 prop driling을 피할수 있다.