🔥 오늘 한 일
- [프로그래머스] Lv.0 8문제 완료
- 기술면접 질문&답변 5개 정리 및 학습
(클로저, JSX, Props Drilling, React, virtual DOM) - [Udemy React] Section10(Reducer & Context API) 학습
- [StudyHaza 플젝] 커뮤니티 글 수정 기능 구현
(기능 구현은 여기서 끄읏- 이제 리팩토링..) - [Udemy JS 알고리즘&자료구조] Section7(재귀)
🧚 새롭게 알게 된 내용
✅ useReducer
state 관리를 도와줌 (useState와 비슷하지만 더 복잡한 state에 유용하다)
const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);
// state: 최신 state snapshot
// dispatchFn: state snapshot을 업데이트할 수 있게 해주는 함수 (액션을 디스패치함)
// 그 액션은 useReducer의 첫번째 인자가 소비
// => reducerFn: 최신 state snapshot을 자동으로 가져오는 함수 (리액트가 이 함수 호출)
// 글구 리듀서 함수는 그 이 리듀서 함수 실행을 트리거하는 디스패치된 액션을 가져옴
// why? 리액트는 새 액션이 디스패치될 때마다 이 리듀서 함수를 호출함
// 리듀서 함수의 중요 역할: 새로운 업데이트된 state를 반환
// initialState: 초기 state
// initFn: 초기 함수💫 useState() & useReducer() 비교
useState()- 개별 state 및 데이터들을 다루기에 적합 (간단한 state에 적합)
userReducer()- state로서의 객체가 있는 경우나 복잡한 state의 경우에 적합
- 연관된 state 조각들로 구성된 state 관련 데이터를 다루는 경우 적합
✅ useContext
- 변경이 잦은 경우엔 적합하지 않다!
✅ Rules of Hooks
- 리액트 훅은 리액트 함수에서만 호출해야 함 (React Component Functions, Custom Hooks)
- 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅 함수의 최상위 수준에서만 호출해야 함
✋ 중첩 함수, block문에서 훅 호출하지 말기! useEffect→ 항상 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야 함
✅ useImperativeHandle & forwardRef
useImperativeHandle,forwardRef를 사용하면 리액트 컴포넌트에서 온 기능을 노출하여 부모 컴포넌트에 연결한 다음, 부모 컴포넌트 안에서 참조를 통해 그 컴포넌트를 사용하고 기능을 트리거할 수 있음
✋ 예외적인 경우에만 사용 지향하므로 피할 수 있으면 사용을 피하는게 좋음!
(그러나 포커싱, 스크롤링 구현에서는 매우 유용할 수 있음!)
FE developer