💡 새로 알게 된 것

웹사이트를 만들 때 useState는 다양한 종류의 상태를 관리하는 데 사용됩니다. 아래는 웹사이트 제작 과정에서 useState가 쓰이는 다양한 상황과 예시를 나열했습니다.

1. 사용자 입력값 관리

웹사이트에서 폼 입력값, 검색창, 드롭다운 선택 등을 관리할 때 useState를 사용합니다.

• 로그인/회원가입 폼

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

• 검색창 입력 관리

const [searchQuery, setSearchQuery] = useState('');

• 드롭다운 선택 관리

const [selectedOption, setSelectedOption] = useState('');

2. UI 상태 관리

• 웹사이트의 인터랙티브한 요소들을 관리합니다.

const [isModalOpen, setIsModalOpen] = useState(false);

• 다크 모드/라이트 모드 전환

const [isDarkMode, setIsDarkMode] = useState(false);

• 탭 전환

const [activeTab, setActiveTab] = useState('home');

3. 리스트 및 배열 관리

useState를 이용해 배열 데이터 추가, 삭제, 수정 등을 관리합니다.

• 할 일 목록 관리