✔️ React 에서 동적 UI를 만드는 3-STEP

우리가 동적 UI를 만들고자 할 때 먼저 떠오르는 것이 무엇일까?
동적 모달 창을 만들고자 한다면 먼저 내용을 담고 있는 창들이 있어야 할 것이고, 특정 이벤트에 따라 표시되거나 사라지는 등의 동작이 있어야 할 것이다

이를 기존 HTML 에서 Javascript 혹은 제이쿼리로 구현하려면 다음과 같이 코드를 작성했어야 했을 것이다

각 버튼 혹은 <div> 태그마다 EventListener 추가하기 혹은

$document("div").click(function () {some event});

그러나 State로 이를 체계화 시켜 알고있으면 동적 UI를 만드는 데 있어서 구조화시키는 것이 훨씬 빨라질 것이다

동적 UI를 만드는 3-STEP

1. HTML + CSS 로 미리 디자인 완성

• 최종적으로 보여질 구조를 디자인하여 생성해 놓는다

2. UI 현재상태를 State로 저장

• 버튼을 클릭했을 때 모달이 표시되고 다시 한번 클릭했을 때 사라지는 동적 UI를 구현하려면 on / off 의 두 가지 상태를 생각하여 작성해야 한다
  

3. State에 따라 UI가 어떻게 보일지 조건문 등으로 작성

• 위의 코드와 같이 클릭했을 때 State 변경함수로 State를 변경해주어 각기 다른 UI를 표시해주도록 코드를 작성해야 한다

컴포넌트의 리턴 안에서 조건문을 사용할 수 있을까?

정답을 먼저 이야기하면 사용할 수 없다

왜냐하면 함수형 컴포넌트 내의 중괄호에는 자바스크립트의 if문이나 for문 등을 사용할 수 없기 때문이다

이로 인해 우리는 if문 대신 삼항연산자를 사용하여 if문을 컴포넌트 내에서 구현할 수 있다

따라서 모달 창 같은 동적 UI를 위와 같은 조건문을 이용해 구성할 수 있다

위의 코드는 modal 이라고 하는 State가 true 이면 Modal 컴포넌트를 HTML 에 추가해주고 false 이면 아무 값도 없는 null 을 표기한다는 의미이다

그렇다면 특정 버튼을 클릭했을 때 모달창을 껐다 켰다 할 순 없을까?

스팬 태그에 onClick 이벤트를 설정하여 Modal State의 상태를 true면 false로, false면 true로 바꾸어주면 가능하다!

span 태그의 버튼을 클릭하면 기존에 디자인 된 모달 창이 동적으로 작동하게 될 것이다!