[TIL/React] 2023/05/05

1. 프로젝트 생성, 설치

리액트 프로젝트에서 의존 패키지를 설치하면, 항상 package.json에서 잘 설치되었는지 확인해주는 작업을 해야함!

2. reducer 생성, store 연결

redux를 통해 상태를 관리할 것이기에, 기초적인 연결 작업을 수행함.

3. InputSection 컴포넌트 & 필요한 Action 생성

<3-1>. InputSection 컴포넌트 내부에는 useState를 사용하여 inputValue에 대한 상태 변수를 선언 <3-2>. inputValue는 객체 형태의 data, 이라는 네 가지 속성이 부여되어 있음 <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에서 렌더링

- handleInputValue라는 함수에 전달되는 event는 단순 parameter 아님? 무슨 근거로 자바스크립트 엔진은 해당 parameter를 'event 객체'로 인식함?

- 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를 초기화한다.