1. 프로젝트 생성, 설치
리액트 프로젝트에서 의존 패키지를 설치하면, 항상 package.json에서 잘 설치되었는지 확인해주는 작업을 해야함!
2. reducer 생성, store 연결
redux를 통해 상태를 관리할 것이기에, 기초적인 연결 작업을 수행함.
3. InputSection 컴포넌트 & 필요한 Action 생성
<3-1>. InputSection 컴포넌트 내부에는 useState를 사용하여 inputValue에 대한 상태 변수를 선언
<3-2>. inputValue는 객체 형태의 data, <title, subTitle, desc, isDone>이라는 네 가지 속성이 부여되어 있음
<3-3>. handleInputValue 함수는 input 요소의 '변경 이벤트'를 처리함
<3-4>. event 객체에서 'name'과 'value' 속성을 추출하여, inputValue 상태를 업데이트함
<3-5>. '...prev' 구문은 객체의 이전 속성 값을 복사하여 새로운 객체를 생성하는 것을 의미
<3-6>. '[name]:value' 구문은 'inputValue 객체'에서 'name' 속성을 업데이트하고, 'value' 값을 할당하는 것을 의미
<3-7>. 궁극적으로 컴포넌트는 'inputArray 배열'에 포함된 문자열 값을 사용하여 input 요소를 렌더링함
<3-8>. 각 input 요소는 'name' 속성에 inputArray에서 가져온 문자열 값(=elem)을 할당하고, 'value' 속성에 'inputValue 객체'에서 해당 속성 값을 할당함
<3-9>. 'onChange' 이벤트가 발생하면 'handleInputValue' 함수가 호출됨
<3-10>. 아직 'Add Button'에 대한 click event를 처리하는 함수는 정의하지 않은 상태임
InputSection 컴포넌트를 최상위 파일인 App.js에서 렌더링
<Q. 의문점이었던 것>
- handleInputValue라는 함수에 전달되는 event는 단순 parameter 아님? 무슨 근거로 자바스크립트 엔진은 해당 parameter를 'event 객체'로 인식함?
<A. 해결>
- onChange라는 속성에서 해당 함수를 '불러냈음'을 전제로, parameter가 어떠한 이름으로 주어지든 '객체'로 인식할 수 있게 됨. 기존에는 name={name}, 이런 식으로 할당해서 헷갈렸다고 판단됨. name={elem}으로 변경하니 명확하게 이해됨. input 태그에서 발생하는 name 속성에 부여하는 elem은 inputArray 배열의 요소(=문자열 값) 중 하나임. 따라서 handleInputValue Fn에서 name은 elem이고, elem에 value를 할당하는 것임!!
다만, 'inputArray 배열의 요소(=문자열 값)'와 'inputValue 객체의 key 이름(고유명사로서의 이름)'이 일치할 필요가 있음. '이름(고유명사로서의 이름)'이 다를 경우, name을 변수로서 인식하지 않음. name이라는 속성이 추가되고 해당 값이 업데이트되는, 예기치 않은 동작을 일으킬 수 있음!!!
InputSection 컴포넌트에서 할 일이 추가되는 action이 필요했다.
<3-1>. 'ADD_TODO'라는 상수를 정의하고, 'addTodo'라는 액션 생성 함수를 만든다.
<3-2>. 'addTodo' 함수는 'todo'라는 인자를 받아 액션 객체를 반환한다. 해당 액션 객체는 'ADD_TODO' 타입과 함께 'todo' 데이터를 담고 있다.
<3-3>. initialState를 정의한다. initialState는 객체로서, todo라는 key와 빈 배열 형태의 value로 구성된 하나의 프로퍼티이다.
<3-4>. reducer에서는 ADD_TODO의 case일 때 다음과 같이 반환한다.
<3-5>. 초기값의 형태를 기본적으로 유지한다.{...state, todo:[~~]}라는 것은 달리 보면 {todo:[], todo:[~~]}와 동일하다. 즉 이전 상태를 복사하며 todo를 새롭게 업데이트 하겠다는 뜻이다.
<3-6>. todo:[~~]의 ~~중 ...state?.todo는 빈 배열을 풀어놓았기에 아무것도 없는 상태이다. 그렇다면 배열 안에 action?.todo만 남게 된다. 그렇다면 todo라는 것은 객체 형태의 데이터여야 한다.
<3-1>. useDispatch는 Redux 스토어의 dispatch 메소드를 가져오는 역할을 한다. 이를 통해 리덕스 액션을 발생시킨다.
<3-2>. useSelector는 Redux 스토어의 상태(state)를 가져오는 역할을 한다. 이를 통해 리덕스 스토어에 저장된 데이터를 가져와서 사용할 수 있다.
<3-3>. Add 버튼에 onClick 속성이 있다. 해당 속성에서 handleAddClick 함수를 실행시킨다.
<3-4>. handleAddClick 함수는 dispatch를 통해 addTodo라는 액션 생성 함수를 실행시킨다. 이때 id 속성이 추가된 형태의 inputValue 데이터를 전송한다.
이 부분과 연결되는 것이다.
<3-5>. 마지막으로 setInputValue 함수를 통해 inputValue를 초기화한다.
