조건부 렌더링이란? 쉽게 말하자만 원하는 조건에 따라 다른 결과를 렌더링 하는것이다. 이를 위해 JS 연산자 if 나 조건부 연산자를 사용해 현재 상태에 맞는 UI 를 출력한다. 이렇게 두가지의 컴포넌트가 있다고 가정했을 때 function HelloApple(){ return Hello, Apple! } function HelloBanana(){ return Hello, Banana! } 현재 과일에 맞는 컴포넌트를 띄우는 Fruit 컴포넌트이다. fucntion Fruit (props){ const currentFruit = props.fruitName; if(currentFruit === 'Apple') return else return } 엘리먼트 변수 사용하기 변수를 사용해 출력의 다른 부분은 ..