탕구리's 블로그

이번 포스팅에서는 조건부 랜더링과 다중 컴포넌트(?)를 랜더링 하는 방법에 대해서 알아보도록 하겠습니다. 조건부 랜더링 React에서 조건부 랜더링은 if 혹은 조건부 연산자를 통해 상태에 따른 엘리먼트를 만들어 낼 수 있습니다. 음.. 한가지 예를 들어보자면 어떤 웹 사이트에 로그인을 하려고 칩시다. 로그인을 하지 않은 경우에는 "로그인 창"이 나타나게 구현할 것이고, 로그인 상태에는 "환영합니다!"라는 문구가 출력되도록 구현하고 싶으면 어떻게 해야 할까요? 그럼 이제 위에서 예시했던 로그인 창은 아니지만 counter를 구현하고 count 숫자에 따라 1~10까지 나타내는 컴포넌트 노출시켜 주는 페이지를 만들어 보겠습니다. 우선, 프로젝트를 생성합시다. create-react-app condition..