008. [part1] 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)

리액트에서 동적 UI 만드는 Step

동적 UI란? 보였다 안 보였다, 뭘 누르면 보였다가 사라졌다 하거나 토글되는 UI를 말함.

이런 UI를 리액트에서는 state로 UI의 상태를 나타내고 UI의 상태를 상태 변경 함수를 통해 바꿔주기만 하면 특정 조건에서 보이거나 보이지 않는 동적 UI를 만들 수 있음.

1. HTML/CSS로 동적으로 보여질 UI를 미리 디자인한다.
2. UI의 현재 상태를 state로 저장해두고
3. state의 상태에 따라 UI가 보일지 말지 조건문으로 작성한다.

const [modal, setModal] = useState(0);
// modal창이 보였다가 안 보였다가 하게 하고 싶기 때문에 modal이라는 state를
// 만들었고, 초기 상태를 숫자 0으로 설정하였음. 이것은 보이지 않는 상태라고
// 내가 그 상태를 기억하면 됨. true, false같은 직관적인 상태도 괜찮음.
// 'closed', 'opened' 등으로 아무렇게나 지정해도 상관 없음. 후에 조건문으로
// 처리할 것임.

return (
  <>
    <Modal /> {/* Modal 컴포넌트를 따로 만들었다고 가정 */}
  </>
);

위와 같은 형태롤 조건문으로 처리해주면 됨.

return (
  <>
    (modal === 1) ? <Modal /> : null;
    {/* modal이라는 state의 값이 1이면 Modal 컴포넌트를 그리고
    1이 아니면 null. (null)은 일반적으로 HTML에서 빈 화면을
    보여줄 때, 즉 안 보여주고 싶을 때 많이 사용 */}
  </>
);

리액트에서는 jsx내에서 if문과 같이 일반적인 자바스크립트 문법을 사용할 수 없고, 표현식으로 써야 함. if문의 경우에는 삼항 연산자로 써야 함. 근데 else에 실행할 코드가 없다면 null을 주거나 '' 빈 스트링을 주면 됨. 일반적으로 null을 많이 사용함.

버튼을 눌렀을 때 UI가 보이게 하기

modal이라는 state의 값이 1이면 보이게, 0이면 보이지 않게 하겠다고 정해놓았으니, 초기 상태를 0으로 해두었다가 버튼을 누르면 1로 바뀌면서, 1일 때만 Modal 컴포넌트를 호출해오면 됨.

const [modal, setModal] = useState(0);
<button type="button" onClick={() => setModal(1)}>
  모달띄우기
</button>;

return (
    <>
    {modal === 1 ? <Modal /> : null}
    <>
)

return문 내부에서 자바스크립트 함수를 쓰고 싶다면 {} 중괄호 내부에 쓰면 됨. jsx 내부에서 {} 중괄호를 열었다는 건 자바스크립트 표현식을 사용하겠다는 의미임.