[React] 동적인 UI 만들기

동적인 UI는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등 유저가 어떤 행동(이벤트)를 했을때 나타나는 새로운 형태의 이벤트를 의미한다. 이러한 동적인 UI를 만드는 스텝은 다음과 같다.

1. html css로 미리 UI 디자인 해놓기

유저의 행동에 따른 이벤트로 나오게 하고싶은 디자인을 미리 해놓는다. 처음부터 디자인을 다 해놓는것도 좋지만 그게 아니라면 최소한 변경된 화면을 확인할 수 있을정도는 해놓는것이 좋을것 같다.

2. UI의 현재 상태를 state로 저장

React의 특징으로 useState를 이용해 상태를 쉽게 변경할 수 있다.
이를 이용해 현재 UI의 상태정보를 저장해둘 수 있다.

let [modal, setModal] = useState(false);

현재 상태를 false로 두었지만 모달창은 '열림, 닫힘' 2가지 상태만 필요로 하기 때문에 이 두 종류만을 표현할 수 있는 자료면 어떤것이든 상관 없다. 보통 2가지 상태를 표현하기 위해서는 Boolean값을 많이 사용한다.

3. state에 따라서 UI가 어떻게 보여야 하는지 작성

조건식을 사용해 어떤경우가되면 modal값을 ture로, 다른경우라면 false상태로 만들어 주는 조건을 만들어준다. JSX에서는 if문 대신 삼항 연산자를 사용해 조건을 입력해준다.

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      <button onClick={ ()=>{ setModal(true) } }> Hello </button> 
      { 
         modal === true ? <Modal></Modal> : null
      }
    </div>
  )
}

버튼 태그를 눌러주면 modal이 true로 바뀌게 해주면 바로 밑 삼항연산자의 modal 이 true가 되면 Modal컴포넌트가 나오게 해준다.

모달창이 버튼을 눌렀을때 닫아지게 하려면 다시 modal의 값을 false로 만들어 주면 된다. 처음 modal의 값을 Boolean으로 줬다면 이 문제는 간단하게 해결 가능하다.

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      <button onClick={ ()=>{ setModal(!modal) } }> Hello </button> 
      { 
         modal === true ? <Modal></Modal> : null
      }
    </div>
  )
}

• setModal을 이용해 modal값을 바꾸는데 그 값을 !를 이용해 modal값과 반대로 해주면 간단하게 Boolean값 변경이 가능하다.