[React] 모달창 component화 및 조건식 사용하기

조건에 따라 다른 내용을 rendering(표현) 해야 할때에는
1. JSX밖에서 컴포넌트로 빼서 if문을 사용
2. {}안에서 삼항연산자를 사용해야 한다

조건부랜더링

조건부 렌더링 – React

//짧은 구문의 삼항연산자
{isLoggedIn ? 'currently' : 'not'}

//긴 표현의 삼항연산자
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}

🌟step1. 삼항연산자를 통해 만들어보기

function App() {
	let [modal, setModal] = useState(false); // 초기값 보이지 않음 설정
	return (
         <div className="list">
            <h4 onClick={() => { setOpenModal(!modal) }}>{headLine[2]}</h4>
            <p>2월 17일 발행</p>
          </div>
          {
            modal === true ? <Modal /> : null
          }
    ) 
}

function Modla () { //대문자는 컴포넌트
	return (
        <div className="modal">
          <h2>제목</h2>
          <p>날짜</p>
          <p>상세내용</p>
        </div>
    )
}

React에서 함수를 사용할 경우 { }안에 사용해야 한다.

useState값을 true값으로 변경할 경우 Modal 창이 보인다.

대문자는 컴포넌트
onClick 실행시 컴포넌트를 넣어줄 수 없다.
소문자는 함수