[React] 동적 UI 만들기

 

3가지 step을 거쳐 동적인 UI를 만드는 방법을 알아보자.

• 동적인 UI -> 모달, 탭, 툴팁, 햄버거 메뉴, 경고문 등등...

 

1. html, css로 미리 디자인 완성

• 앞선 포스팅에서 미리 만들어둔 Modal 사용

 

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

• Modal의 현재 상태를 state로 저장해주자.
  
  • state 내부에 현재 상태 보여주기
  • 0과 1, true와 false 등 형식은 상관 없음
• 변경함수는 set으로 시작하는게 관습

 let [postModal, setPostModal] = useState('close');

 

 

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

• 현재 상태에 따라 어떻게 보여줄지 작성
•  중괄호를 작성 후 조건문 사용
  • -> 내부에 if 문을 사용하면 안 먹힌다
  • why?
    • js가 아닌 html 이기 때문
  • 따라서, 삼항 연산자 사용 

• 우리가 원하는 것은 state의 값에 따라 보여주기

{
        postModal == true ? <Modal/> : ''
      }

 

제목 누르면 Modal 창 띄워주기

 

• onClick 이용해준다.
• 또한, state 변경 함수를 사용해야 하는 것 기억!!!!

<div className="postList">
        <h4 onClick={()=> { setPostModal(true) }}>{ postName[2] }</h4>
        <p>01 24 테스트</p>
      </div>

 

반대로 클릭시 닫아주기

 

• 위 코드에서 true 만 !modal로 변경해준다면 클릭시 반대 행위가 일어난다!!

<div className="postList">
        <h4 onClick={()=> { setPostModal(!postModal) }}>{ postName[2] }</h4>
        <p>01 24 테스트</p>
      </div>

 

 

 

다른 동적 UI들은 혼자 해보기!!