조건에 따라 컨텐츠를 보여주고 보여주지 않는 방법에 대해 알아볼 것이다.

코드 설명
4. const [condition, setCondition] =useState(false);
useState를 이용하여 초기값을 false로 설정
5. const toggle= () =>setCondition(!condition);
toggle 함수 작성. condtion의 반대로(!가 not을 의미) 업데이트하게 하여 True로 나타나게 한다.
7. useEffect(()=> {console.log(condition);}, [condition]);
useEffect를 이용하여 랜더링 후 condition이 출력되도록 한다. 그리고 [condition]으로 인해 첫번째 출력 이후 condition에 변화가 있을 때만 출력한다.
16. <buttononClick={toggle}>Toggle</button>
Toggle 버튼을 만들고 클릭시 함수 toggle이 작동한다.

코드를 실행한 결과 잘 작동하는 것을 볼 수 있다.
정리해보자.
useState로 조건문을 만들었다. 초기값을 False로 주고 setCondition으로 !conditiion을 주어 초기값의 역으로 업데이트되게 설정하여 이것을 버튼과 연결시켰다. 이로써 버튼을 클릭할 때마다 False와 True가 번갈아가며 나타나게 되었고 그것을 console.log로 출력하였다.
코드를 좀 더 간단하게 바꾸어보자.
콘솔창에서 확인하지 않고 곧바로 화면에서 변화를 볼 수 있도록 코드를 작성해보자

11. const renderCondition= condition?<div>True</div>: <div>False</div>
삼항연산자를 이용한 코드로 condition이 참일 때 True 거짓일 때 False를 출력한다.
19. {renderCondition}
renderCondition의 결과가 출력되는 코드

코드 결과 버튼을 클릭하여 True와 False가 바뀌는 것을 볼 수 있다.
나는 이게 어떻게 작동하는 건지 헷갈려서 메모장에 코드를 적어가면서 분석해 이해했다...

이렇게 해서 조건을 이용해 랜더링하는 방법에 대해 알아보았다.
'Study > React' 카테고리의 다른 글
코지코더 React 11 컴포넌트, props 데이터 보내기 복습 (0) | 2021.05.31 |
---|---|
코지코더 React 10 반복문 (0) | 2021.05.30 |
코지코더 React 8 자식 컴포넌트에 데이터 보내기 (Props) (0) | 2021.05.26 |
코지코더 React 7. 컴포넌트로 반복 제거 (0) | 2021.05.21 |
코지코더 React 6. useEffect (2) (0) | 2021.05.20 |