React useState Hook에서 배열 값 업데이트
-
useEffect를 사용하여 ReactuseState후크에서 배열 값 업데이트 -
onClick이벤트로 ReactuseState후크의 배열 값 업데이트 -
마우스 이벤트로 React
useState후크에서 배열 값 업데이트 - 결론
웹 앱에서 고객이 선택할 수 있는 확장된 옵션 목록을 만들려는 프로그래머의 경우 드롭다운 메뉴를 사용하는 것이 가장 효율적인 방법 중 하나입니다. 고객이 10개 국가 목록에서 선택하고 라디오 버튼 옵션을 사용하도록 하면 웹사이트가 혼잡해 보이고 렌더링 속도가 느려집니다.
그러나 드롭다운 옵션을 사용하면 웹사이트가 단순해 보입니다. 50개 국가 목록의 경우에도 사용자는 옵션을 클릭할 때까지 해당 목록이 웹사이트에 포함되어 있다는 사실조차 알지 못할 것입니다.
또한 사용자가 원하는 옵션을 정확하게 선택할 수 있도록 도와줍니다. 드롭다운 메뉴에서 알파벳 바로 가기를 사용할 수 있으므로 옵션을 더 빨리 선택할 수도 있습니다.
React 프레임워크의 유연성은 이를 수행하기 위해 다양하지만 최고 수준의 방법을 사용할 수 있습니다. 이러한 방법 중 일부를 소화해 보겠습니다.
useEffect를 사용하여 React useState 후크에서 배열 값 업데이트
React에서 useEffect 기능을 적용하면 구성 요소의 상태를 원래 상태에서 다른 상태로 전환하는 데 도움이 됩니다.
이 예에서 페이지가 렌더링되면 렌더링된 구성 요소의 원래 상태가 됩니다. 그런 다음 드롭다운에서 항목을 선택하기 위해 클릭하면 구성 요소가 다른 상태로 이동합니다. 그것이 useEffect의 작업입니다.
이제 프로젝트 폴더의 index.js 파일로 이동하여 다음 코드를 작성합니다.
코드 조각 - index.js:
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const StateSelector = () => {
const initialValue = [{ id: 0, value: " --- Select a State ---" }];
const allowedState = [
{ id: 1, value: "Alabama" },
{ id: 2, value: "Georgia" },
{ id: 3, value: "Tennessee" }
];
const [stateOptions, setStateValues] = useState(initialValue);
console.log(initialValue.length);
useEffect(() => {
setStateValues(allowedState);
}, []);
return (
<div>
<label>Select a State:</label>
<select>
{stateOptions.map((localState, index) => (
<option key={localState.id}>{localState.value}</option>
))}
</select>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);
출력:
이 예는 원본 페이지가 렌더링되고 상태 선택을 표시하는 것을 보여줍니다. 드롭다운의 목록은 구성 요소가 이동할 새 상태입니다.
여기에서 allowedState 배열 값의 상태를 설정하기 위해 useEffect를 할당할 때 이 명령을 정의합니다.
onClick 이벤트로 React useState 후크의 배열 값 업데이트
이 메서드는 onClick 이벤트 리스너를 사용하여 구성 요소를 초기 상태인 Choose One에서 새 상태로 이동합니다.
시작하려면 프로젝트 폴더의 src 폴더 안에 Dropdown.js라는 새 파일을 만들어야 합니다. 여기에서 onClick 이벤트 리스너의 기능을 정의합니다.
그런 다음 편집기에서 Dropdown.js 파일을 열고 몇 가지 코드를 작성합니다.
코드 조각 - Dropdown.js:
import { useState } from "react";
function Dropdown({ selected, setSelected }) {
const [isActive, setIsActive] = useState(false);
const options = ["Me", "You", "Us"];
return (
<div className="dropdown">
<div className="dropdown-btn" onClick={(e) => setIsActive(!isActive)}>
{selected}
<span className="fas fa-caret-down"></span>
</div>
{isActive && (
<div className="dropdown-content">
{options.map((option) => (
<div
onClick={(e) => {
setSelected(option);
setIsActive(false);
}}
className="dropdown-item"
>
{option}
</div>
))}
</div>
)}
</div>
);
}
export default Dropdown;
드롭다운을 클릭하는 순간 onClick이 활성화되고 이벤트 리스너에 매핑한 option 구성 요소에 즉시 액세스합니다.
다음으로 Dropdown.js 파일을 프로젝트 폴더의 App.js로 가져와서 렌더링할 수 있도록 해야 합니다.
코드 스니펫 - App.js
import "./App.css";
import Dropdown from "./Dropdown";
import { useState } from "react";
export default function App() {
const [selected, setSelected] = useState("Choose One");
return (
<div className="App">
<Dropdown selected={selected} setSelected={setSelected} />
<br />
<br />
<br />
{selected}
</div>
);
}
출력:
여기에서 Dropdown을 가져오고 구성 요소의 초기 상태를 Choose One으로 설정했습니다. 이것이 onClick 이벤트 리스너가 활성화될 때 업데이트되는 것입니다.
그런 다음 렌더링될 수 있도록 App div 안에 Dropdown을 래핑합니다.
마우스 이벤트로 React useState 후크에서 배열 값 업데이트
이 방법을 사용하면 웹 앱이 매끄럽게 보이고 작동합니다. 사용자는 드롭다운 메뉴 위에 마우스를 올리기만 하면 목록이 표시됩니다.
이 예제에서는 onMouseEnter 및 onMouseLeave 이벤트를 적용합니다. 새 프로젝트 폴더를 만든 후 src 폴더 안에 dropdown.js와 dropdown.css라는 두 개의 파일을 만듭니다.
dropdown.js 파일 내부에 다음 코드를 작성합니다.
코드 스니펫 - Dropdown.js
import React, { useState } from 'react'
import './Dropdown.css';
function Dropdown() {
const [state, setstate] = useState(false);
const showDropdown=()=>{
setstate(true);
}
const hideDropdown=()=>{
setstate(false);
}
return (
<div className="dropdown">
<div className="dropdown-menu" onMouseEnter={showDropdown} onMouseLeave={hideDropdown}>
Dropdown
{state ?( <ul className="dropdown-list" onMouseEnter={showDropdown}>
<li>1st Value</li>
<li>2nd Value</li>
<li>3rd Value</li>
<li>4th Value</li>
</ul>):
null}
</div>
</div>
)
}
export default Dropdown;
이 onMouseEnter 파일에서 마우스 이벤트를 선언하고 showDropdown에 이벤트를 할당하여 드롭다운에 항목을 표시한다고 선언했습니다. onMouseLeave에도 동일한 작업을 수행하여 마우스를 드롭다운 메뉴에서 멀리 이동하면 나열된 항목이 숨겨집니다.
그런 다음 Dropdown을 App.js 파일로 가져와 App div 안에 래핑해야 합니다. 이렇게 하면 구성 요소가 렌더링됩니다.
코드 조각 - App.js:
import React from 'react';
import Dropdown from './Dropdown';
function App() {
return (
<div>
<Dropdown/>
</div>
)
}
웹 페이지에 몇 가지 스타일을 생성하기 위해 아래 CSS를 적용할 수 있습니다.
.dropdown {
height: 2rem;
}
.dropdown-menu{
width:20rem;
text-align: center;
color: black;
background: lightgray;
position: relative;
cursor: pointer;
padding: 2rem;
}
.dropdown-menu:hover{
color:white;
background: gray;
}
.dropdown-list{
list-style-type: none;
position: absolute;
bottom: -7rem;
left:0;
width:100%;
background:gray;
}
.dropdown-list>li{
border:1px solid transparent;
}
.dropdown-list>li:hover{
border:1px solid white;
}
출력:
결론
React에서 드롭다운 기능을 활용하는 것의 중요성과 효율성에 대해서는 의심의 여지가 없습니다. 잘 디자인된 드롭다운은 웹 앱이 눈을 즐겁게 하는 동시에 드롭다운의 콘텐츠가 웹페이지에 로드되지 않고 기능 뒤에 숨겨져 최적의 속도로 로드됩니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn