[React] 삼항연산자를 사용한 클릭 이벤트

React에서 component안에서 함수를 사용하려면 
{}중괄호를 이용하여 사용하면 되는데

component의 return()안에서 if문 사용 시 if else를 적으면 적용이 안되고
삼항연산자를 사용해야 한다.

 

<h1>{ 1 == 1 ? "정답" :  null }</h1>

// [조건] ? [조건이 true일 때] : [조건이 false일 때]

위와 같이 조건에 따라 내용을 노출 시킬 수 있으며
여기서 null은 빈 html을 의미한다.

 

{ 1 == 1 ? <Box /> : null } // <Box />
{ 1 == 1 ? <h1>정답</h1> : null }

텍스트 뿐만 아니라 이런식으로의 노출도 가능하다.

 

&&연산자의 사용

{ 1 == 1 && <h1>정답</h1> }

위 코드는 삼항연산자와 동일한 역할을 한다.

왼쪽 조건식이 true면 오른쪽의 JSX가 남는다.

 

if문(삼항연산자)를 사용한 클릭 시 component 노출

 

react에서 UI를 만들 때는 state 데이터를 이용한다.
스위치처럼 on/off하는 개념으로 state에 true/false로 사용.

예를들어 원래는 안보이는 상태인데
클릭 시 보여주는 이벤트를 만든다고 가정 해보자.

 

function App() {

let [memo, setMemo] = useState(false);

return (
  <div>
    <button onClick={ ()=> setMemo(true) }>Click</button>
    { memo ? <Memo /> : null }
  </div>
  );
}

이렇게 component안에 state를 생성하여 기본값을 false로 선언해 준 후
button onClick으로 state를 true로 변경해주면
만들어놓은 <Modal />이 생성되는 것을 확인할 수 있다.

 

on/off기능처럼 사용하려면?

 <button onClick={ ()=> setMemo(!memo) }>Click</button>

false로 설정해놓은 memo state의 앞에 !를 붙여주어

클릭 시 반대로 변경되게끔 설정해 줄 수 있다.