3. Zustand - 연락처 앱 (4)

연락처를 추가하려면...

// 추가한 연락처를 저장하는 장소 필요! -> 배열[ ] 필요! (왜냐하면 연락처가 여러개) ex. 배열:phoneBook=[ }

// 거기에 연락처를 추가!

 

* onClick 리스너 : 이름 = handleAddContact * (중요 X ? 참고!!!!!!!)

여기서 phoneBookList를 보여줄 것이다.

 

잠깐!!!

2개의 컴포넌트(ContactForm.jsx와 ContactList.jsx)가 연락처(phoneBook)를 공유하고 있다!

따라서 useState X / Zustand(상태 관리 라이브러리) O

 

ex. 배열:phoneBook=[ } 

=> 어떤 변수가 다른 컴포넌트에서도 많이 쓰인다. or 전역적으로 쓰인다 :  Zustand(상태 관리 라이브러리)를 통해서 전역적으로 저장해두는 게 좋다!

 

cf. 컴포넌트 내에서(만) 쓰이거나 or 자식 컴포넌트에 딱 한번만 전달될 것 같다(한개의 자식 컴포넌트에만 대물림된다)

: useState()로 지역적으로 선언해주는게 좋다!!

 

 

usePhonebookStore.js = phoneBook에 관련된 것을 모두 모아둘 예정!!

이거 하려고 Zustand 다운받았자나!!

(함수 안에) phoneBook이라는 빈 배열을 만들어준다.(생성한다-create)

 

 

여기서 의문이 생긴다...

만약 이름이나 전화번호가 비어있나? 값은 잘 들어가있나? 점검해보자!

 

둘 중에 하나라도 값이 없어! 그러면 return~ 연락처(값)을 받지 않는다.(반환한다.)

만약에 통과했다.! addContact라는 함수를 만들고 매개변수로 name과 phoneNumber를 넣는다.(전달해준다)

 

그럼 addContact()라는 함수는 어디에 만들어야 할까?

연락처를 추가한다.- phoneBook[ ] = 연락처 아래에 만들면 된다. - usePhonebookStore.js에 만들면 된다.

phoneBook: [] = state?

state를 추가 & change, 즉 바꾸는 것 .. 따라서 "set"을 해준다! (create가 기본적으로 제공해주는 =set)함

set 함수가 기본적으로 (제공해)주는것 : state

state = 현재의 phoneBook값을 state가 준다.

addContact : (name,phoneNumber) = name과 phoneNumber를 전달받는다.

{phoneBook : [...state.phoneBook],{name,phoneNumber } = 기존에 있는 연락처는 놔두되 그 뒤에 새로운 연락처를 붙인다.

 

만약 각각의 phoneBook에 id 가 필요할 것 같다

배열을 보면 여러개가 있으니까 각각 id를 붙여주잖아요

 

현재 기준으로 id를 그냥 자연스럽게 대충 생성해주세요~느낌.

 

매개변수로 받아온 name과 phoneNumber를 phoneBook: [ ] 배열 뒤에 붙여주겠다.

 

그리고 ContactForm.jsx에 가면...

1. (usePhoneBookStore.js에서 사용한 AddContact를 사용하기 위해서는...)

2. addContact를 usePhoneBookStore에서 가져와야 한다.(들고와야 한다.) 가져오겠습니다.

3. 그걸 그대로 써주면 된다.