조건부 렌더링 은 무엇인가?
- 리액트로 컴포넌트를 만들다보면 props나 state에 따라 달라지는 컴포넌트를 반환하고 싶을 때가 있음. 그리하여 '조건부 렌더링'을 깔끔하게 작성하면, 코드의 가독성이 높아짐.
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있음. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있음.
- In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작함. if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것.
- Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.
조건부 렌더링 예:
예문) 나이가 14세 미만일경우 "14세 미만은 부모님 동의가 필요합니다. 라는 메세지를 출력하고, 14세 이상일 경우 "다음단계로 진행해주세요" 메세지를 출력합니다.
1) 조건1 14세이상일 경우
2) 조건2 14세 미만일 경우
자세한 내용은 아래 레퍼런스 통해 확인 할 것!
어제보다 나은 나의 코딩지식