유저친화적 웹페이지
특정 사이트를 방문하는 유저는 그 사이트에서 자신이 원하는 목적을 달성하기 위해 사이트를 탐방할 것이다. 또, 그 과정에서 사이트와 수 많은 상호작용이 오갈 것이다. 예를 들자면 로그인하기, 검색해서 원하는 상품 찾기 등 말이다.
우리도 평소에 쉽게 유저가 되기 때문에 잘 알 것이다. 어떤 사이트가 더 이용하기 좋은지 또는 불편한지 말이다. 그러한 이유에는 사이트의 디자인 적인 부분이나 컨텐츠의 질도 영향을 미치지만 사이트가 '유저친화적'인가에 따라서도 달라진다.
여기서 유저친화적이라는 것은 유저들이 많은 수고를 들이지 않고 원하는 목적을 달성하게끔 구성된 사이트를 뜻할 것이다. 이름바 더 interactive하고 직관적으로 이용할 수 있는 사이트 말이다.
더 다양한 상호작용을 허락하는 Hooks
그러한 웹페이지를 만드는 방법 중 하나로 유저와 상호작용성이 높은 UI를 만드는 것이 있다. 유저에게 보이는 UI는 유저가 취하는 행동이나 상황에 따라 다르게 보인다. 그러한 요소들을 State라고 하고 State는 함수안에서 다양한 변화를 준비한다.
UI = f(state)
State는 원래 따로 수정이 불가능했지만 React에서는 Hooks 라는 개념으로 State를 빼내와서 수정이 가능하게 해준다. 그러한 Hooks중 가장 대표적인 것이 바로 useState이다.
useState로 더 interactive하게
useState는 다음과 같은 문법으로 되어있다.
const [color, setColor] = useState()위에서 color는 현재의 값이고 setColor는 이후 추가 함수에 의해 기존color를 어떤식으로 변화할지 설정할 수있다.
useState() 안에는 초기값을 넣을 수 있고 이는 color의 초기 값이 된다.
앞서 말했던 setColor의 값은 다음과 같이 설정한다.
function newFunction() {
setColor()
}이처럼 새로운 함수를 만들고 setColor()의 안에 새로 취하고 싶은 값을 넣어준다. 위의 함수는 아직 제대로 설정되진 않았지만 색의 변화를 만들어 내는 기능을 한다고 가정해보자.
마우스 커서를 올려뒀을 때 그 영역의 색이 변한다면 클릭하여 무언가 요청할 수있다는 것을 유저는 학습을 통해 이미 알고 있다. 이것을 이용하여 버튼에 위 함수를 적용하면 유저는 "아, 이 상자를 누르면 되겠구나"와 같은 판단을 직관적으로 알 것이다.
앞으로
Hooks는 useState말고도 여러 함수가 존재한다. 그러한 함수에 대해서는 이후에 알아보도록 하고, 어쨌든 useState를 통해 상황을 특정하고 그러한 변화에 따라 UI를 바꿀 수 있다는 것은 아주 멋진 일이다. 개발자는 유저에게 더 다양한 이용 경험 선보일 수 있고, 유저는 더 편리하고 친절한 경험을 할 수있기 때문이다.
프론트엔드는 유저가 경험하는 부분을 구현하기 때문에 유저 입장에서 생각하는 것은 더 좋은 웹페이지를 만드는 중요한 마인드셋이라고 생각한다. 그러한 마인드를 바탕으로 React를 깊게 배우면서 이와 같은 유저친화적인 기능에 대해 익숙해진다면 AirBnB, Netflix 와 같은 멋진 유저친화적 UI를 구현할 수있을 것이라고 믿는다.
