React: 조건부 렌더링

🧐 조건부 렌더링이란?

-> javascript 에서 예외처리하는 방식과 유사한데, if나 조건부 연산자를 현재 상태를 나타내는 엘리먼트에 사용한다. 그러면 react 는 현재 상태에 맞게 UI를 업뎃한다.

 

맨처음에 if를 사용해서 예외처리를 하려고 했는데 잘 안됐던,,,

그래서 찾아보니 inline으로 처리하는 방법이 있어서 해봤다.

 

{}중괄호를 이용해서 표현식을 넣고 html에 해당하는 부분은 ()괄호로 감싸줬다.

routines의 길이가 0이면 (루틴 리스트가 없으면) 

Add your routine이라는 문구가 화면에 보여지고 

루틴이 추가되면 저 문구는 사라지고 루틴 리스트가 하나씩 쌓이게 만들어줬다.