본문 바로가기

Study/React

코지코더 React 9. 조건 랜더링

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

코드 설명

4. const [conditionsetCondition=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가 바뀌는 것을 볼 수 있다.

나는 이게 어떻게 작동하는 건지 헷갈려서 메모장에 코드를 적어가면서 분석해 이해했다...

이해하기 위해 노력한 흔적..

 

이렇게 해서 조건을 이용해 랜더링하는 방법에 대해 알아보았다.

728x90