[React 조건부 렌더링]
[keyword]
조건부 렌더링, if문, 논리 연산자 &&, 조건부 연산자(=삼항연산자)
✔️ React에서 조건부 렌더링하는 세 가지 방법
1. if문으로 표현하기
2. 논리 연산자 &&
3. 조건부 연산자(=삼항 연산자)
( 조건부 렌더링이란, React에서 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 하는 것.
JavaScript 연산자를 활용해 현재 상태를 나타내는 엘리먼트 만들면, React가 현재 상태에 맞게 UI를 업데이트함.
React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작함.)
상태에 맞게 여러 컴포넌트 중 하나를 보여주는 컴포넌트를 만들어 조건부 렌더링 할 수 있음.
출력의 다른 부분은 변하지 않은 채로, 컴포넌트의 일부를 조건부로 렌더링 할 수 있음.
1. if문으로 표현하기
⬇️ 현재 상태에 맞게 <LoginButton />
이나 <LogoutButton />
을 렌더링하는 예시
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
{button}
</div>
2. 논리 연산자 &&로 if를 인라인으로 표현하기
JavaScript에서
true && expression
은 항상 expression / false && expression
은 항상 false
따라서, && 뒤의 엘리먼트는 조건이 true일때 출력 됨. 조건이 false라면 React는 무시함.
(❕false로 평가될 수 있는 표현식을 반환하면 && 뒤에 있는 표현식은 건너뛰지만 false로 평가될 수 있는 표현식이 반환됨 주의)
3. 조건부 연산자(=삼항 연산자)로 if-else구문 인라인으로 표현하기
condition ? true: false
⬇️ 짧은 구문을 조건부로 렌더링하는 예시
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
참고자료:
[1] https://ko.reactjs.org/docs/conditional-rendering.html
Author And Source
이 문제에 관하여([React 조건부 렌더링]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suhado/React-조건부-렌더링저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)