💎 개요
react를 공부하면서 상황에 따라서 컴포넌트를 화면상에 렌더링하거나 다른 컴포넌트를 띄워야하는 상황을 마주할 수 있었다. 이러한 부분을 조건부 렌더링이라고 하였는데, 코딩테스트를 준비하면서는 if else문으로 처리하여 했었던 내용 처럼 특정 조건에 상응한다면 렌더링하고자 하는 내용들을 렌더링 하는 것으로 처리하던 것이었다.
이러한 조건부 렌더링은 상황에 따라서 아주 유용하게 쓰일 수 있기 때문에 기억해둘 필요가 있다고 생각하였다!! 따라서 이러한 조건부 렌더링을 잘 사용해볼 수 있도록 velog에 게시하고자 하였다.
참고한 부분은 리액트 공식문서를 참고하며 velog 글을 작성하였으며, 프로젝트에서 사용하였던 조건부 렌더링 부분을 예시로 글을 작성하고자 한다!!
🍫 참고자료
👉 리액트 공식문서(조건부 렌더링) 이동하기
💎 조건부 렌더링
🍫 조건부 렌더링이란?
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다.
... 가 React 공식문서에 있는 조건부 렌더링에 대한 설명이다. 저게 조금 말이 어려운데 쉽게 말해서는 if 같은 조건문을 사용하여 원하는 어떤 컴포넌트를 렌더링할지 선택할 수 있도록 하는 것이다!!
예를 들면
// 공식문서의 예시
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);위 두 개의 컴포넌트가 있다면 두 개의 컴포넌트를 if 문을 이용하여 적절한 컴포넌트를 설계하여 UI를 구성하는 것이 조건부 렌더링인 것이다!!
🍫 if-else 문
그렇다면 조건부 렌더링은 어떤 식으로 할까?? 앞서 말했던 예시처럼 먼저 if-else 문을 이용할 수 있다. 이는 정말 간단하다!! 그냥 우리가 평소에 파이썬, c++을 이용하였듯이 이용하면 된다.
.
.
.
// 리액트 공식문서의 예시
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}위 예시 처럼 그냥 if-else문을 이용하여 조건에 따라서 button에 대한 컴포넌트를 각각 상황에 맞게 배치하면 된다. 하지만 이렇게 if-else를 사용하다보면 좀 불편한 점이 있는데, 코드를 작성해보다 보면 알겠지만 코드가 길어질 수 있다. 이렇게 되면 가독성이 떨어지거나 좀 더 짧게 구성할 필요를 느낄 것이다. 따라서 다음으로 소개할 것들을 사용하는 편이 좋다!!
🍫 &&
논리 연산자인 && 은 위 if-else문에 비해 간편하게 코드를 작성할 수 있다. 이는 자바스크립트내의 중괄호를 이용하여 표현할 수 있으며 다음 예시처럼 사용할 수 있다!!
.
.
.
// 라액트 공식문서의 예시
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
.
.
.위 예시처럼 굉장히 간편하다. && 앞에 있는 조건이 참이라면 뒤에 있는 표현식을 렌더링하면 되는 것 이다. 따라서 한눈에 보기 쉬울 뿐더러 만약 조건에 대해서 참이나 거짓에 대해서 하나의 컴포넌트를 구성하여 렌더링하고 싶을 때 굉장히 유용하게 쓸 수 있다. 하지만 주의해야할 점은 &&앞의 조건이 0과 같은 형식의 falsy표현식이라면 false를 반환할 수 있다는 점을 유의하도록 해야한다!!
🍫 삼항 연산자
내가 가장 많이 사용하기도 하는 삼항 연산자는 condition ? true: false 와 같이 유용하게 사용할 수 있다. 이는 true에 해당하는 부분은 조건이 참일 때의 경우를 렌더링하고 false에 해당하는 부분은 거짓일 때의 경우를 렌더링 한다. 이 경우는 중첩으로 이용할 수 있으며 자바스크립트의 중괄호 형식으로 코드를 작성하여 참과 거짓일 때의 경우를 적절하게 잘 사용하여 조건부 렌더링을 할 수 있다!!
{
errorMessage ?
<p style={{ display: 'none', fontFamily : 'KyoboHand'}}>
아이디와 비밀번호가 일치하지 않습니다. 다시 입력해주세요.
</p>
:
<p style={{ color : "#FF0000", fontFamily : 'KyoboHand'}}>
아이디와 비밀번호가 일치하지 않습니다. 다시 입력해주세요.
</p>
}위와 같이 내가 프로젝트를 진행하면서 사용하였던 로그인 입력시 오류메시지 출력 예시이다. 만약 errorMessage가 true였다면 아이디와 비밀번호가 일치하지 않다는 문구를 감추고 있게 만들었으며, 만약 false라면 오류 문구를 출력하도록 하였다. 다음과 같이 확인할 수 있다!!
위와 같이 오류 메시지를 출력할 때와 안할 때를 구분시켜줄 수 있다!!
💎 정리하면서
react의 조건부 렌더링에 대해 알아보면서 '나는 어떨 때에만 이걸 렌더링하고 싶은데 어떻게 해야하지?'라는 의문을 좀 해결할 수 있었다. 굉장히 편리할 뿐만 아니라 이렇게 하면 코드를 간추릴 수 있는 여러 방법들이 존재하기 때문에 이런 식으로 정리하여 조건부 렌더링을 사용할 수 있도록 해봐야겠다!!
react를 이용하는 프로젝트를 진행하다보니 백엔드 통신뿐만 아니라 내가 렌더링하는 부분에서도 사용자 입장에서의 어떤 식의 UI가 적절할지 많이 고민할 수 있었다. 이는 기획과 피그마를 동시에 사용하며 내가 디자인을 진행하다보니 프론트엔드 입장을 더 잘 이해할 수 있게 되었던 것 같다!!
react를 공부하면서 앞으로도 기억해야할 부분들을 잘 정리해두도록 하자!! 기획, 개발, 디자인까지 다 잘할 수 있는 사람이 되도록 해보자.
화이팅~!!!
