전체 글101 17일차 (Lv2 리뷰) 배포 주소: https://hh99-react-todolist-lv2.vercel.app/ React App hh99-react-todolist-lv2.vercel.app 구현해야 할 기능 Create Todo Read Todos, Todo Update Todo Delete Todo 요구사항 공통 todos 데이터는 리덕스를 사용해서 전역으로 상태를 관리 todos 모듈은 **Ducks 패턴**으로 구현 메인 페이지 디자인과 화면 구성은 자유롭게 구현 Todo의 상태에 “완료” 그룹과 “진행 중" 그룹을 나뉘어서 보이도록 구현 Todo를 추가하면 제목 input과 내용 input은 다시 빈 값이 되도록 구현 input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value가 초기화되도록.. 2023. 9. 1. 16일차 (React Router Dom) React Router Dom 1. 페이지 컴포넌트 작성 2. Router.js 파일 생성하여 router를 구성하는 설정코드 작성 3. App.jsx 파일에 import 하고 적용 React Router Dom 기본구성 const Router = () => { return ( ); }; React-router-dom Hooks 1. useNavigate: 다른 페이지로 보내고자 할 때 사용(페이지 이동) = 와 유사 2. useLocation: 위치정보 파악 => const location = useLocation(); 3. Link: 와 대치되는 기능 4. useParams: id값을 넘겨 세부페이지를 보여주는 기능 5. Children의 용도: Layout 사용할 때 headter과 footer를 .. 2023. 8. 30. 15일차 (Redux) Redux 기본개념 1. Props 문법이 귀찮을 때 2. 상태관리 해야할 때 사용 3. Reducer: state를 수정하는 방법 4. Dispatch: 액션 객체를 가지고 store에 던져주는 역할 5. action: 객체이며, type과 payroad를 가짐 => payroad는 props와 유사하다고 보면되고, Action 객체는 action type를 payload 만큼 처리 // State Global state: 중앙 state 관리소(어디서든 가능, prop로 내려주지 않아도 됨) Local stae: 컴포넌트 내에서 사용하는 state Redux 폴더 설명 1. redux: 리덕스 관련 코드를 모두 몰아넣음 2. redux/config: 리덕스 설정 관련 파일 전부 3. redux/con.. 2023. 8. 30. 14일차 (최적화 React hook, Virtual DOM) 최적화: 불필요한 렌더링을 줄이는 방법 1. React.memo: 컴포넌트를 캐싱 2. useCallback: 함수를 캐싱 3. useMemo: value를 캐싱 최적화 필요 개념 1. 캐싱: 메모리에 임시적으로 저장해두는 행위 2. Memoization: 컴포넌트의 state 변경으로 인해 props가 변경되지 않는 한 컴포넌트가 리렌더링이 되지 않는 것 React.memo: 컴포넌트의 메모이제이션 export default React.memo(Child); { for (let i = 0; i heavyWork(), []); 위와 같은 무거운 코드는 로딩이 되는데 오래 걸림 그래서 값을 .. 2023. 8. 29. 이전 1 ··· 16 17 18 19 20 21 22 ··· 26 다음 728x90
