react 리액트 조건렌더링

이번 포스팅은 react에서 조건렌더링 하는 방법에 대해 알아보겠습니다.

 

useState를 사용해서 저 toggle이란 버튼을 누르면 false => true로 true=> false 바뀌게 하는겁니다.

 

1) 8-10 줄을 보시면 renderCondition이라는 변수를 만들고 그안에 컨디션이 true면 <h1>true</h1>를 보여주고 아니면  <h1>false</h1>를 보여준다는 삼항연산자를 사용하여 할당하였습니다.

2)이 변수를 15번 줄에 {} 중괄호를 사용해서 넣어줬구요.

3)그밑에 버튼을 하나 만들었습니다. onClick으로 toggle이라는 함수를 넣어줬습니다. 

4)toggle이라는 함수는 condition이라는 변수가 반대가 될수있는 setCondition함수를 가지고 있습니다.

5) 5번줄을 보시면 useState의 초기값은 false입니다. 그래서 처음 condition의 값도 false이고, 밑에 버튼을 눌러주면 false가 true가 됩니다. 

영상으로 확인해보세요^^

봐주셔서 감사합니다.

이 글의 내용은 밑에 링크를 통해 실습한 것입니다.

www.youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX