조건 렌더링

원하는 조건에 따라 렌더링시 원하는 컨텐츠를 싶을 때 useState와 useEffect를 사용해 조건 설정을 해줄 수 있습니다.

• button을 누르면 True, False가 번갈아 화면에 보여주기

// 기본 설정값을 false로 설정합니다
const [condition, setCondition] = useState(false);

// condition을 바꿔주는 toggle 함수 
const toggle = () => setCondition(!condition);

useEffect(() => {
  console.log(condition);
}, [condition]);    // condition이 바뀔 때만 로그가 찍힙니다

const renderCondition = condition ? 'True' : 'False'

return (
  <div className="App">
    <div>{renderCondition}</div>
    <button onClick={toggle}>Toggle</button>
  </div>
);

⇒ toggle 함수는 setCondition 함수를 사용해 참 → 거짓, 거짓 → 참 으로 바꿔줍니다.

⇒ useEffect는 렌더링 될 때 condition이 변경되면 실행합니다.

⇒ renderCondition 함수는 condition 참, 거짓 여부에 따라 문자열을 리턴합니다.

⇒ <div>{renderCondition}</div>로 화면에 True, False중 하나의 문자열만을 보여줍니다.

condition : false

condition : True