리액트에서 동적인 UI 만드는 방법
리액트에서 모달창이나 좋아요 버튼같이 사용자가 클릭할 때마다 상태가 변화하는 UI를 만들어야 하는 일이 많다.
자바스크립트에서는 이런 경우 DOM을 이용하여 html을 생성하거나 style을 토글로 관리해주는 방식으로 구현하지만 리액트에서는 그런 개념이 아니기 때문에 헷갈리는 경우가 있다. 따라서 오늘은 동적인 UI를 어떻게 만들어야 하는지 예시를 통해 알아보자!
나는 버튼을 누름에 따라 모달창이 나타나게 하려고 한다.
1. 만들고자 하는 UI의 html,css 마크업을 해놓는다.
function App() {
return (
<>
<button>모달 보여주세요</button>
<div className="box">
<p>모달창입니다</p>
</div>
</>
);
}
먼저 만들고자 하는 UI의 마크업 먼저 해준다. 나는 '모달 보여주세요' 버튼을 누르면 모달창이 나오도록 구현하고 싶기 때문에 app 컴포넌트 안에 버튼과 모달창을 만들었다.
2. UI의 현재 상태를 state에 저장한다.
ex) let [modal,setModal]=useState(false);
import {useState} from 'react';
function App() {
let [modal,setModal]=useState(false);
return (
<>
<button>모달 보여주세요</button>
<div className="box">
<p>모달창입니다</p>
</div>
</>
);
}2번이 가장 중요한 부분이다. 동적인 UI의 핵심은 useState를 사용하는 것이다. 모달의 상태를 관리할 state를 하나 생성한다. 나는 modal이라는 state를 만들었고 버튼을 누르기 전에는 모달이 안보이는 상태이기 때문에 modal 의 초깃값을 false로 했다. state를 만드는 것만으로는 UI상에서의 변화는 없다.
3. state에 따라서 UI가 어떻게 보일지 작성한다.
import {useState} from 'react';
function App() {
let [modal,setModal]=useState(false);
return (
<>
<button onClick={()=>{setModal(true)}}>모달 보여주세요</button>
{modal=== true
? (<div className="box">
<p>모달창입니다</p>
</div>)
: null}
</>
);
}
이제 state의 상태에 따라서 UI가 어떻게 보일지만 작성해주면 된다. 나는 버튼을 누르면 모달이 나오게 하고 싶다. 그렇다면 버튼을 눌렀을 때 modal의 상태를 true로 바꿔주면 된다. 그리고 아래에는 조건문을 활용해서 modal이 true라면 모달창을 보여주고, false라면 null을 보여주게끔 작성해주면 된다.
여기서 조금 어려움이 있을 수가 있는데 보통 이 조건문을 삼항 연산자를 활용해서 작성하기 때문에 이 문법이 익숙하지 않을 수가 있고, 또한 state의 상태를 변화시켜주는 것이 헷갈릴 수가 있다.
리액트에서는 자바스크립트처럼 직접 html을 건드는 대신 state라는 일종의 스위치를 만든다. 이 스위치를 통해 modal의 상태를 조절해 주면서 UI를 만들어 줄 수 있다.
여기서 만약 버튼을 누를 때 모달이 나타났다 사라졌다 반복하게 하고 싶다면 onClick 안에도 조건문을 넣어주면 된다.
import {useState} from 'react';
function App() {
let [modal,setModal]=useState(false);
return (
<div className='cont'>
<button onClick={()=>{
modal === true ? setModal(false) : setModal(true)}}>모달 보여주세요</button>
{modal=== true
? (<div className="box">
<p>모달창입니다</p>
</div>)
: null}
</div>
);
}