14

• JSX에서 조건문 쓰는 법

조건문은 if / else 문법을 쓰면 되는데
JSX 안에서는 if else 문법을 바로 사용할 수 없습니다.
써보십시오 글자색도 이상해지는걸 알 수 있다.
하지만 if 문법 대신 삼항연산자라는건 JSX 중괄호 안에서 사용가능하다
그러니까 리액트에서 if문을 쓰려면 삼항연산자를 사용해야한다
ex)
{
1 == 2 ? '맞음' : '아님'
}

      {  
        modal == true ? <Modal/> : null
      }
      // state에 따라 UI가 어떻게 보일지 작성한다.
      // null은 비어있는 html용으로 자주 사용한다.

• 모달창을 띄우고 싶을때 어떻게 하느냐?

      <div className="list">
        <h4 onClick={() => { setModal(true) }}>{ 글제목[2] }</h4>
        <p>2월 17일 발행</p>
      </div> 
      // 이런식으로 onClick만들어서 무조건!! 변경함수 사용해서 바꾸면 된다.

• 동적인 UI 만드는 step

1. html css로 미리 디자인 완성
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성

🐤 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다.

• array 함수