[React] 클릭시 UI 보였다가 안보였다가 하기

기존 JavaScript에서는

클릭시 컴포넌트 만들고 보여줬다가 안보여줬다가 하고 싶었을 때 기존에는

style="display: block" none 등을 사용했었다.

 

 

리액트에서는 state를 이용해 삼항연산자를 사용한다

조건에 따라서 컴포넌트 보여주고 싶으면

JSX 안에 if 대신 삼항연산자를 사용하면 된다.

*삼항연산자

조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드

JSX에서 아무것도 없는 HTML을 내보내고 싶으면, null을 사용하면 된다.

 

UI를 만들 때 state 데이터를 이용한다.

let [컴포넌트이름, 컴포넌트변경함수] = useState(false);

컴포넌트를 켜고 닫는 스위치 역할을 한다.

 

state변경할 때는 state변경함수 사용해서

onClick = { () => { 컴포넌트변경함수(!컴포넌트이름) }} 이렇게 한다. 즉, state를 토글한다!

 

정리

1. UI 보임/안보임 정보를 state로 저장해둔다.

2. 삼항연산자로 state가 true일때 UI를 만들어둔다.

 

모바일에서 햄버거 메뉴, 탭도 방금 방법과 동일하게 한다. 잘 기억해두자!!!!!!!!