[🍎코딩애플 강의요약] React에서 동적 UI 만들기: 모달창 구현

동적 UI 개발 3단계 프로세스 🔄

React에서 모달창, 탭, 서브메뉴 등의 동적인 UI를 만들기 위한 체계적인 접근법을 알아봅니다.

1. 디자인 준비하기 🎨

• HTML/CSS로 UI 디자인을 먼저 완성
• 보이고 숨겨야 할 모든 요소를 미리 디자인

2. 상태 관리하기 (state) 📊

// 모달창 상태 관리를 위한 state 생성
let [modal, setModal] = useState(false);

• UI의 현재 상태를 표현할 state 생성
• boolean, 숫자, 문자열 등 상황에 맞는 자료형 선택
  • 예: true/false, 0/1, '열림'/'닫힘'
• state 변경 함수 이름은 관례적으로 set으로 시작

3. 조건부 렌더링 구현하기 🔀

// JSX에서 조건부 렌더링
{
  modal === true ? <Modal></Modal> : null
}

• JSX 안에서는 if else 문법을 바로 사용할 수 없음
• state 값에 따라 UI를 표시하거나 숨김
• JSX 내에서는 삼항 연산자 사용
  • 조건 ? 참일때 실행 : 거짓일때 실행
• null은 아무것도 표시하지 않을 때 사용

이벤트와 상태 연결하기 🔌

글제목 클릭으로 모달창 열기

function App() {
  let [modal, setModal] = useState(false);
  
  return (
    <div className="app">
      <div className="list">
        <h4 onClick={() => { setModal(true) }}>글제목</h4>
        <p>날짜</p>
      </div>
      
      {
        modal === true ? <Modal></Modal> : null
      }
    </div>
  );
}

동적 UI 개발 철학 💡

• 리액트 방식: state를 조작하면 UI가 자동으로 반응
• 비유: 전등(UI)과 스위치(state)의 관계
  1. 전등(UI) 설치
  2. 스위치(state)와 연결
  3. 스위치 조작으로 전등 제어
• 기존 JavaScript와 다른 점: HTML을 직접 조작하지 않음

응용: 토글 기능 구현하기 🔄

모달창을 열고 닫는 토글 기능 구현:

function App() {
  let [modal, setModal] = useState(false);
  
  return (
    <div className="app">
      <div className="list">
        <h4 onClick={() => { 
          // 현재 상태의 반대 값으로 변경 (토글)
          setModal(!modal) 
        }}>
          글제목
        </h4>
        <p>날짜</p>
      </div>
      
      {
        modal === true ? <Modal></Modal> : null
      }
    </div>
  );
}

핵심 요약 📌

1. 동적 UI 개발에는 "디자인 → 상태 → 조건부 렌더링" 3단계 접근법 활용
2. JSX 내에서는 if-else 대신 삼항 연산자 사용
3. UI 요소의 표시/숨김은 HTML을 직접 조작하지 않고 state 변경으로 제어
4. 토글 기능은 현재 state의 반대 값으로 설정하여 구현

---

강의 내용 검토 🔍

Claude.ai 에서 제시한 강의에서 보충하면 좋은 내용

1. 다양한 조건부 렌더링 방식 소개 부족:
   삼항 연산자 외에도 && 연산자를 사용한 더 간결한 방식도 있습니다.

   // true일 때만 보여주기 (false일 때는 자동으로 아무것도 표시 안 함)
   { modal && <Modal></Modal> }

2. state 업데이트 최적화 설명 누락:
   여러 번의 클릭이 빠르게 발생할 경우, 함수형 업데이트 방식을 사용하면 더 안정적입니다.

   // 일반 방식
   setModal(!modal)
   
   // 함수형 업데이트 방식
   setModal(prevState => !prevState)