React에서 모달같은 UI 개발법(짧음 주의).

기본적으로 React에서는 UI의 상태를 useState로 관리해준다.

 

명심하자. 절대 일반 변수로 관리하지않는다.

 

그리고 전용 상태 변경 함수에 true 또는 false를 인자로 집어넣어 보이고 말고를 조작한다.

 

 

그리고 Vue.js의 v-if 같은 문법으로 html에 등장시킬지 말지 결정하는데,

 

JSX에서 그 역할을 바로 삼항 연산자가 해준다.

 

저렇게 useState로 생성한 UI의 상태를 의미하는 변수를

 

해당 UI가 보여지고자하는 위치에 중괄호를 치고 그 안에

 

삼항연산자의 조건문으로 달아준다.

 

 

그리고 ? 에는 true일 경우 보여질 컴포넌트, : 에는 보여질게 없으니 null을 부여해주면된다.

 

참 못생긴 프레임워크다.