한입리액트2 리액트 - useReducer useReducer를 이용하면, 기존에 컴포넌트 내에서 하던 상태 관리를 컴포넌트 외부에서 정의할 수 있다. 따라서 코드상에서 컴포넌트가 반환하는 JSX요소를 쉽게 파악할 수 있다. 상태(state) 관리 로직이 복잡하거나, 여러 개의 관련된 상태 업데이트가 필요한 경우, 상태 관리와 로직을 더 명확하고 체계적으로 처리하기 위함 컴포넌트 내부에서는 useReducer를 사용해서 관리할 상태와, dispatch를 선언하고, dispatch가 호출될때 = 상태 변경할 것을 요청실제로 상태 변경을 할 함수를 정의한다. (여기서는 reducer) 리턴문에서 각 요소의 이벤트 핸들러를 할당해주고, 각 핸들러가 reducer함수에게 전달할 액션객체를 dispatch 함수 안에서 정의한다 컴포넌트 외부에서 re.. 2024. 9. 5. 리액트 - 상태관리 위치 (부모? 자식?) todo list 의 기본적인 구조는 위 그림과 같다.헤더에서는 간단히 오늘 날짜를 알려주는 역할 외의 기능은 없다. 각 자식 컴포넌트의 역할은TodoForm 의 인풋에서 입력값을 받아 추가하면 CheckList 에서 리스트를 렌더링하고, 삭제, 완료, 검색 등의 기능을 한다. ui만 보고 구현해보고, 이후에 강의를 듣는 식으로 진행했는데 아직 미숙한 부분들을 깨달았당 ㅎ실습을 마치고 구조를 파악하기 위해 위와 같이 마인드맵의 형태로 그려보았다 내가 구현한 방식과 강의와의 가장 큰 차이는 두 가지였는데, 1. 상태 관리를 어디서 하는가2. 새로 추가하는 데이터의 형태 1. 상태관리 위치공통적으로는 input에서 입력한 value값을 content state로 관리 했는데 (이건 너무 당연한가 ㅋㅋ)나는.. 2024. 9. 5. 이전 1 다음
