[React] 4. 동적인 UI 제작하기

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

 

 

전 포스팅에서 다루었던 컴포넌트의 예시로 모달(Modal)창을 제작하였다.

이를 완성하며 동적인 UI를 제작해보자!

 

1. 동적인 UI 만들기

유저의 조작에 따라 형태가 바뀌는 UI를 만들기 위해서는 아래의 단계를 따라서 만들면 된다!

1) html  블록 만들기
2) UI의 상태를 state로 만들기
3) state에 따른 UI의 형태를 조건문 등으로 작성
4) state 조작하기

 

1) html 블록 만들기

function Modal(){
  return(
    <>
      <div className="modal-container">
        <div className="modal">
          <div className="bar"></div>
          <div className="modal-title-container modal-inner-container">
            <span>제목</span>
            <div className="modal-title">Title</div>
          </div>
          <div className="modal-singer-container modal-inner-container">
            <span>가수</span>
            <div className="modal-singer">Singer</div>
          </div>
          <div className="modal-detail-container modal-inner-container">
            <span>세부사항</span>
            <div className="modal-detail">Detail</div>
          </div>
        </div>
      </div>
    </>
  );
}

조작할 UI의 html과 css를 작성한다. (컴포넌트가 아니어도 관계 없음)

 

 

2) UI의 상태를 state로 만들기

UI의 상태정보를 state로 저장한다.

즉, 변수에 저장된 값을 참조하여 조작을 할 것이므로 현 상태를 식별할 변수를 만들겠다는 의미이다.

 

const [modal, setModal] = useState('closed');

 

이처럼 임의로 상태 정보를 저장한다.

물론 state 정의 시에는 현 상태를 저장해야한다.

 

 

3) state에 따른 UI의 형태를 조건문 등으로 작성

state에 담긴 값을 참조하여 UI의 형태를 조건문으로 조작한다.

 

이때 중괄호{ }를 활용하여 블록을 만들고 그 안에 조건문을 넣어준다.

 

function App(){
  return(
    ...
    
    {
      조건문
    }
    
    ...
  )
}

 

이때 주의할 점은 현재 html 문서를 작성중이므로 

if 문을 사용할 수 없고 삼항연산자를 사용해야한다.

 

 

{
  modal === 'closed' ? null : <Modal></Modal>
}

 

 

4) state 조작하기

이제 state를 조작할 수 있도록 만들어주면 된다.

 

...

<div className="music-list" 
  onClick={()=>{modal === 'closed' ? setModal('open'):setModal('closed')}}>

...

위 예시에서는 onClick 속성에서 조작할 수 있도록 하였다.

 

// 만약 조작할 state가 boolean일 경우
<button onClick={ ()=>{ setModal(!modal) } }> CHANGE </button>