[React] 블로그 제작 2 - 동적인 UI, 삼항연산자

동적인 UI 만들기

- 사용자가 조작 시 형태가 바뀌는 UI

 

 

 

동적인 UI 만드는 3단계!

1. html, css로 미리 UI를 만들기

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

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

 

 

 

 

예시) 모달창 띄우기

1. html, css로 미리 UI를 만들기

// App.js
function Modal() {
  return (
    <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세 내용</p>
      </div>
  )
}

// App.css
.modal {
  margin-top: 20px;
  padding : 20px;
  background : #eee;
  text-align: left;
}

 

 

2. 현재 상태 저장

// UI의 현재 상태
let [modal, setModal] = useState(false);

 

 

 

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

• 삼항 연산자 사용

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

return (
    <div className="App">
      ...
      <div className="list">
      <h4 onClick={()=>{ setModal(!modal); }}>{ titles[2] }</h4>
      <p>11월 30일 작성됨</p>
      </div>

      {
        modal ? <Modal/> : null
      }

    </div>
  );
}

 

 

 

 

 

 

사진 없어서 드라이브 뒤적뒤적,, 처음으로 혼자 여행했던 후쿠오카!

이 날 명란 바게트 먹을거라고 드레스 코드도 명란이었던,,