React 블로그(동적 UI 만들기)

■ 동적 UI 만들기

이번에 만들 기능은 글제목을 눌렀을 때, 전에 만들었던 상세페이지 창을 켰다가, 다시 누르면 끄는 기능입니다.

그리고 방금 설명했듯이 유저가 조작했을 때 형태가 바뀌는 UI 들을 동적 UI라고 합니다.

 

동적 UI를 만들 때의 3step이 있습니다.

1. html/css로 UI 디자인하기

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

3. state에 따라서 UI가 어떻게 보일지 작성하기

 

1. html/css로 UI 디자인하기

디자인은 저번에 만들었던 Modal 컴포넌트를 활용하겠습니다.

2023.07.03 - [React] - React 블로그(component)

 

 

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

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

modal 이라는 state를 만들고 false라는 상태를 저장했습니다.

참고로 state 변경함수는 앞에 set을 붙이는게 관습니다.

 

 

3. state에 따라서 UI가 어떻게 보일지 작성하기

보통 쓰이는 방법은 조건문입니다.

JSX에서의 조건문은 아래와 같은 방식으로 사용할 수 있습니다.

조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드

js에서 썼던 if 문이 아닌 삼항연산자라는 문법이 JSX에서 사용하는 조건문입니다.

 

modal == true ? <Modal></Modal> : null

위 조건문을 해석하면, modal state가 true 였을 때, <Modal> 컴포넌트를 실행하고 아니라면 아무것도 보여주지 말라는 코드입니다.

 

이제 클릭했을 때 modal state가 true 바뀌는 state 변경함수를 코드로 작성해주면 됩니다.

그리고 state 변경함수의 괄호( ) 안에는 !modal을 넣습니다.

!는 !우측 자료를 반대로 바꿔줍니다.

modal state가 false이기 때문에 !를 붙이면 !modal은 true가 됩니다.

 

마지막으로 코드를 작성해보면, 아래와 같이 작성할 수 있습니다.

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(!modal) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}