리액트의 조건부 렌더링은 자바스크립트와 동일한 방식으로 동작한다.
조건부 렌더링
if 또는 조건부 연산자(삼항연산자)와 같은 자바스크립트 연산자를 사용하여 리액트가 조건에 맞는 UI를 화면에 업데이트하도록 한다.
1. if문 사용하기
props 값에 따라 다른 컴포넌트를 렌더링하는 방법이다.
먼저 if문을 사용해 조건부 렌더링하는 코드를 살펴보자.
function UserAdvertisingMSG() {
return <h2>지금 결제하면 10% 할인!</h2>;
}
function GuestAdvertisingMSG() {
return <h2>회원가입 후 최대 10% 할인을 받아보세요!</h2>;
}회원의 로그인 유무에 따라 각각 다른 광고 메시지가 나타난다고 가정해보자.
const [isLogin, setIsLogin] = useState(true);회원의 로그인 유무를 담을 state 변수이다.
<AdversitingMSG isLogin={isLogin} />AdversitingMSG 컴포넌트는 isLogin이라는 props를 받아서 true 또는 false 값일 때 각각 다른 컴포넌트를 보여주도록 하는 컴포넌트이다.
isLogin을 state 변수를 AdversitingMSG 컴포넌트의 props로 넘겼다.
function AdversitingMSG({ isLogin }) {
if (isLogin) {
return <UserAdvertisingMSG />;
}
return <GuestAdvertisingMSG />;
}
isLogin이라는 state 변수의 true 또는 false 값에 따라 각각 다른 컴포넌트가 나타날 것이다.
현재는 isLogin이 true 이므로 UserAdvertisingMSG 컴포넌트의 h2 태그 메시지인 "지금 결제하면 10% 할인!" 이라는 문구가 나타난다.
isLogin이 false 이면 GuestAdvertisingMSG 컴포넌트가 나타날 것이므로 "회원가입 후 최대 10% 할인을 받아보세요!" 가 화면에 출력될 것이다.
2. 삼항 연산자 사용하기
삼항 연산자 사용을 통해 조건부 렌더링하는 방법이다.
function LoginBtn(props) {
return <button>Login</button>;
}
function LogoutBtn(props) {
return <button>Logout</button>;
}로그인 버튼과 로그아웃 버튼 컴포넌트을 만들어주었다.
function ShowLoginOutBtn({ isLogin }) {
return isLogin ? <LoginBtn /> : <LogoutBtn />;
}1번 if문 사용하기 예제에서 사용했던 isLogin state 변수를 props로 사용했다.
해당 props가 true 이면 LoginBtn 컴포넌트를 보여주고 false이면 LogoutBtn 컴포넌트를 보여준다.
현재는 true 값으로 설정되어 있으므로 Login 버튼이 나타난다.
3. 논리 && 연산자 사용하기
자바스크립트의 논리 연산자 &&을 사용해서도 조건부 렌더링이 가능하다.
로그인 버튼에는 적합한 예시는 아니지만 사용 방법은 다음과 같다. 자바스크립트 문법이기 때문에 중괄호를 넣어주었다.
{ isLogin && <LoginBtn /> }isLogin 이라는 state 변수가 참일 때 <LoginBtn/> 컴포넌트를 보여준다. 하지만 여기서 참일때만 보여주므로 false 값을 가질 때 LogoutBtn을 보여주진 못한다.
&&연산자는 조건부 렌더링 사용시 더 짧은 코드로 작성하고 싶을 때 사용한다.
참고 자료
리액트 공식문서
