3. Zustand - 연락처 앱 (3)

 

Zustand는 상태를 관리하는 라이브러리

관리가 필요한 상태들은 다른 컴포넌트에 공유(쉐어)가 되는 것들은 상태 관리 라이브러리에 있으면 공유하기가 쉽겠지.

근데 name,phoneNumber는 다른 컴포넌트에 쓰이지 않는다. (value에 잠깐 사용). 이런 것들은 상태 관리 라이브러리에 넣어줄 필요가 없다!!

 

다른 컴포넌트에서도 전역적으로 쓰이면 / 여러 컴포넌트에서 같은 데이터를 써야 한다면/다른 페이지(컴포넌트)에서도 공유해야 한다면  -> 상태 관리 store에 만들기 (Zustand).(ex.로그인(완료된)정보, 페이지가 바뀌어도 유지해야하는 상태 등)

 

이 컴포넌트 내에서만 쓰이면/  / 컴포넌트 하나에서만( 또는 자식 컴포넌트에 한단계 정도만 내려가는)  필요한 데이터라면

-> 그냥 useState (ex.UI변화 등 상태변화)

 

<구글링>

onChange()함수 란? : 

HTML 폼 요소(input, select, textarea)의 값이 변경될 때 발생하는 이벤트 핸들러 함수입니다. 사용자가 입력하거나 선택을 바꿀 때마다 실시간으로 반응하여 상태(state)를 업데이트하거나 데이터를 처리하는 데 필수적이며, 리액트 등 프론트엔드에서 동적인 UI를 구현하는 데 주로 사용됩니다. 

핵심 특징 및 작동 원리

• 실시간 업데이트: 입력 필드의 값을 변경할 때마다 발생하여 데이터를 실시간으로 반영합니다.
• 주요 사용처: input, select, textarea 태그.
• 이벤트 객체: 이벤트 핸들러 함수는 변경된 요소의 값에 접근할 수 있는 이벤트 객체(e)를 매개변수로 받으며, e.target.value로 현재 값을 가져옵니다.
• 리액트에서의 사용: 상태 관리(useState)와 함께 사용하여 사용자의 입력을 제어된 컴포넌트(Controlled Component) 형태로 처리합니다. 

사용 예시 (JavaScript & React)

• JavaScript: input.addEventListener('change', updateValue);
• React: <input type="text" onChange={(e) => setValue(e.target.value)} /> 

이 이벤트는 주로 사용자 입력 데이터의 유효성 검사, 폼 제출 전 데이터 처리, 또는 입력값에 따라 다른 화면 요소를 보여주는 기능 등에 활용됩니다. 

 

<결과>

 

(...아직 추가 버튼은 동작하지 않는다...)