if문 대신 삼항연산자

JSX안의 { } 에 조건문을 써야하는데 리액트의 { }중괄호 안에서 if문을 사용할 수 없기에 삼항연산자를 사용해야 한다.

{ }안에 조건식 ?  참일 때 실행코드 : 거짓일 때 실행코드  이런 식으로 적어준다. 예를 들면,

{
    1 < 3
    ? console.log('맞아요')
    : console.log('틀려요')
}

이렇게 사용하면 된다. 그래서 응용으로 어떤 h3태그를 눌렀을 때 모달창을 보여주세요 라고 코드를 짜보자.

 

우선,  리액트에선 UI를 만들 때 state 데이터를 이용한다. 버튼이 true인지 false인지도 state를 이용해 만들어보면,

let [modal, modal변경] = useState(false);

이렇게 만든 후,

{
        modal == true
        ? <Modal></Modal>
        : null
}

이렇게 적어, modal이란 상태가 true면 저번에 만든 Modal이란 UI가 보여지게 된다.

이제  데이트 맛집 추천이라는

<div className="list">
        <h3> {글제목[2]} </h3>
        <p>2월 26일 발행</p>
        <hr />
</div>

코드를 누르면 true / false가 바뀌어야 하므로

<div className="list">
        <h3 onClick={ () => { modal변경(true) } }> {글제목[2]} </h3>
        <p>2월 26일 발행</p>
        <hr />
</div>

 

 

onClick과 변경함수로 적어주면 된다.

 

이렇게 리액트에서 UI를 만들땐 정보를 state에 저장해둔다.

 

let [모달, 모달변경] = useState(false);

<button onClick={ () => { 모달변경(!모달) } }>버튼</button>

열고닫기 버튼을 만들 땐 모달변경(!모달)을 써서 모달의 기본값이 false인데 ! 를 붙여 click하면 현재값과 반대(!)로 바꿔달라하면 토글이 된다.