삼항연산자 사용(on/off 기능 만들기)

삼항연산자 사용해서 버튼 입력 시 컴포넌트창 on/off 기능 만들기
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

condition ? exprIfTrue : exprIfFalse
condition 이 참이면 exprIfTrue 거짓면 exprIfFalse

null : 조건문에서 false 값으로 사용 가능(빈 html을 나타낸다)

처음 작성한 코드
문제점 : off 동작이 되지않음 console 시 true만 찍힘

let [component, setComponent] = useState(false)


{component === true ? <Component /> : null}

<button onClick={() => {setComponent(true)}></button>

수정 후 : 버튼 입력 시 state 값 반대로 변하게 수정_!(not) 사용
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT

let [component, setComponent] = useState(false)


{component === true ? <Component /> : null}

<button onClick={() => {setComponent(!component)}></button>