리액트 정리(4). 리액트 환경에서 동적인 UI 만들기(모달창 만들기)

리액트에서 동적인 UI를 만드는 step

동적인 UI란 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁 경고문 등의 UI들을 의미한다. 리액트에서 동적인 UI를 만드는 순서는 보통 아래와 같다.
1.html css 등을 이용하여 UI 창을 미리 디자인 해 놓는다.
2.UI의 현재 상태를 state로 저장해둔다.
3.UI의 현재 state에 따라서 UI가 보이게 할 지 안보이게 할 지 조건문으로 작성한다.

동적인 UI 만들기 예시

1. html css 등을 이용하여 UI 창을 미리 디자인

function Modal(){ // html을 이용한 모달창 UI, App function과는 별도로 작성해준다.
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

.modal{ // App.css 파일에서 modal div에 대한 스타일 작성
  margin-top : 20px;
  padding : 20px;
  background : #eee;
  text-align : left;
}

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

UI의 현재 상태를 저장할 수 있는 state를 하나 만든다.

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

modal 창의 상태가 false일 경우, modal 창이 나타나지 않고, true일 경우, modal 창이 나타나는 방향으로 코드를 작성하였다.

3. UI의 현재 state에 따라서 UI가 보이게 할 지 안보이게 할 지 조건문으로 작성

본 예시에서는 버튼을 클릭하면, modal 창이 보이게 하는 방향으로 예시를 작성해보았다.

function App (){

  let [modal, setModal] = useState(false); // modal 창의 초기상태(안보이는 상태)
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(true) } }> 버튼 </button> // 버튼을 클릭하면, modal의 상태를 true로 바꿔준다.
      { 
         modal == true ? <Modal></Modal> : null // modal의 상태가 true라면 Modal 컴포넌트를 삽입, false라면 아무것도 띄워주지 않는다.
      }
    </div>
  )
}

위와 같이 state를 활용하여 리액트 환경에서 동적인 UI 모달창을 생성할 수 있다.

만약 버튼을 다시 눌렀을 때 모달창을 사라지게 하고 싶다면?

이 경우에는 버튼을 누르면, modal의 state를 뒤집어주는 방법으로 구현할 수 있다.
예시

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략) // setModal(!modal) ==> modal이 true면 false로, false면 true로 바꿔줌
      <button onClick={ ()=>{ setModal(!modal) } }> 버튼 </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

그래서 리액트에서 UI만드는 과정을 비유하면 스위치와 전등 만드는 거랑 비슷하다.

1.일단 전등이쁘게 달아놓고
2.스위치랑 연결하고
3.스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록
만들어놓는다.
그리고 나중에 필요시 스위치 조작만 한다.
이 경우, 스위치는 state, 전등은 Modal이라고 볼 수 있다.

출처 : 코딩애플 "React 리액트 기초부터 쇼핑몰 프로젝트까지!"