[리액트] 버튼 클릭시 요소 표시, 숨기기

오늘 해볼 실습은 버튼을 클릭하면 요소(컴포넌트)가 보이고, 다시 버튼을 클릭하면 숨겨지게 하기!!

 

 

첫 화면

여기서 '보이기' 버튼을 클릭하면, 버튼은 '숨기기'로 바뀌고, Input창에 입력한 이름, 나이, 전화번호가 출력된다.

블로그 나이는 이제 한살^^ 🎉

 

---

[Myinfo.jsx]

컴포넌트의 이름은 Myinfo이며 코드는 다음과 같다.

useState로 3개의 속성(이름, 나이, 전화번호)을 만든다음 onChange 이벤트 세 가지를 만들어주었다.

 

 

 

하지만, 이글의 핵심은!! 버튼 클릭시 어떻게 요소를 표시하고 숨기는 것이다!!!

App.jsx에 다음과 같이 코드를 적어준다.

[App.jsx]

코드를 위에서 아래로 설명하기보다 핵심만 설명하겠음!!

 

우선 15번째 줄을 보면,

AND 논리연산자가 나온다. (만약 논리 연산자를 모르겠다면 밑 링크 참고!!) 

visible이 true일 경우 Myinfo 컴포넌트가 보이고, false일 경우 컴포넌트는 보이지 않는다.

 

12번째 줄을 보면, button에 이름을 적을 것이다.

보통 <button>버튼 이름</button> 형식인데,

여기서는 삼항 연산자 형식으로

visible이 true면 '버튼 이름'을 숨기기, false일 경우 '버튼 이름'을 보이기로 변경한다.

 

 

+

자바스크립트 코드를 작성할 때, 삼항 연산자보다는 if else를 더 많이 사용했는데,

리액트에서는 if else문보다 삼항연산자를 정말 더더 많이 사용한다!!

(리액트에서 for문 대신 map을 더 사용하는 것처럼)

 

 

 

참고)

 

논리연산자

표현식과 연산자 | MDN

삼항연산자

 

삼항 조건 연산자 | MDN