React Hooks가 있는 형제 상태

요전에 React Hooks를 사용하여 앱 작업을 하고 있었는데 작성하고 싶은 패턴을 발견했습니다!

앱

장면을 설정합시다. App 및 Box 두 가지 구성 요소가 있는 Warning.가 있습니다. 목표는 사용자가 Don't touch me! 라는 상자를 "터치"할 때 경고를 표시하는 것입니다.

초기 코드는 다음과 같습니다. 현재 경고는 항상 나타납니다.

움직임 감지

가장 먼저 해야 할 일은 누군가가 Box 구성 요소 위에 마우스를 놓을 때 주의하는 것입니다. 우리가 그 행동을 감지할 수 없다면 우리는 다른 어떤 것도 할 수 없습니다. onMouseOver 이벤트를 사용하고 콘솔에 메시지를 인쇄하여 작동하는지 확인합니다.

콘솔 열기를 토글하고 상자 위로 마우스를 가져가면 메시지가 표시됩니다.

키보드 접근 가능

그러나 모든 사람이 마우스를 사용하는 것은 아닙니다. 사용자는 키보드를 통해 요소에 집중할 수도 있습니다. Box 구성 요소는 탭 가능한 요소가 아닌 단일div입니다. 탭 가능하게 만들기 위해 tabIndex 를 0 로 설정할 수 있습니다. tabIndex는 탭 순서에서 요소를 제거하는 -1, 추가하는 0, 페이지에서 요소의 탭 순서를 명시적으로 설정할 수 있는 양수 값의 세 가지 가능한 값을 사용합니다.

두 번째로 추가해야 할 것은 onFocus 이벤트입니다. 이것은 onMouseOver 이벤트와 똑같이 보이지만 키보드 사용자가 요소를 탭할 때 발생하는 이벤트입니다.

상태 후크

이제 마우스 또는 키보드 이벤트에 모두 반응할 수 있으므로 해당 정보를 Warning 구성 요소로 보내려고 합니다. 이것이 React hooks가 작동하는 곳입니다!

이 예에서는 useState 를 활용할 것입니다. 구문은 다음과 같습니다.

const [value, setValue] = useState("initial value")

우리 앱에서는 경고를 표시할지 여부를 알려주는 부울 값을 원합니다. 그래서 isDanger setter 함수와 함께 제공되는 setIsDanger를 만듭니다. isDanger 를 false 로 초기화하겠습니다.

결과적으로 이 setter 함수를 Box 에 전달할 수 있습니다. 그리고 그것을 사용하면 isDanger 값이 변경됩니다.


isDanger 는 상위 구성 요소 App 에서 초기화됩니다. 따라서 자식 구성 요소 Box 가 값 변경을 트리거했지만 상태는 여전히 App 에 연결되어 있습니다.

이 동작을 확인하기 위해 console.log(isDanger)에 App 줄을 추가할 수 있습니다.

상태 사용

이제 필요할 때 값이 변경될 것이라는 확신을 가지고 isDanger를 Warning 구성 요소에 전달할 수 있습니다. isDanger를 사용하여 경고 메시지를 조건부로 렌더링합니다. 그렇지 않으면 null를 반환합니다.

접근성을 위해 div에 alert 역할을 추가합니다. 즉, 화면에 나타날 때마다 스크린 리더가 이를 알려줍니다.

"재설정" 상태

그리고 그것이 우리의 예입니다! 좀 더 좋게 만들고 싶다면 우리가 듣고 있는 이벤트를 변경할 수 있습니다. 이전 버전에서 isDanger를 true로 설정하면 경고가 표시됩니다. 그러나 isDanger를 다시 false로 설정하지 않았기 때문에 경고가 유지됩니다.

마우스 상호 작용을 처리하기 위해 mouseEnter 및 mouseLeave 를 사용할 수 있습니다. 키보드의 경우 onFocus 및 onBlur 가 필요합니다. 이것의 가장 큰 장점은 후크 및 전달 상태의 복잡성을 변경하지 않는다는 것입니다. setIsDanger 함수를 몇 번 더 참조합니다.

후크는 재미있다!

상태 후크를 사용하기 위한 common pattern입니다. 그리고 이것을 소화 가능한 예로 증류하는 것이 항상 쉬운 것은 아닙니다! 그래서 저는 이것을 분해할 수 있게 되어 매우 기뻤습니다.