조건부 랜더링

프로젝트를 진행하다보면 특정 조건에서만 컴포넌트를 렌더링 해야하는 상황이 발생한다. 컴포넌트 함수 내부에서 특정 값에 따라 선택적으로 렌더링하는 것을 조건부 렌더링(conditional rendering)이라고 한다.

조건부 렌더링을 구현하기 위해서는 삼항 연산자 && 연산자를 사용할 수 있다.
삼항 연산자: 조건의 true / false 에 따라 각기 다른 UI 를 렌더링 할 때 사용.
&& 연산자 : 조건이 true 일때만 특정 UI 를 렌더링 하고 false 일때는 아무것도 렌더링 하지 않도록 할 때 사용.

웹사이트에 로그인 시 보유 포인트를 확인할 수 있는 코드를 구현한다고 가정해보자

해당 컴포넌트는 부모 컴포넌트로부터 isLogin, name, point 라는 3가지 props를 전달받아서 isLogin의 상태가 true일 경우 사용자의 이름과 보유 포인트 내역을 보여준다.

class Greetin extends Component {
	render() {
		const { isLogin, name, point } = this.props;

		return {
			<div>
				{isLogin ? (
					<div>
						<p>{name}님 환영합니다!</p>
						<p>현재 보유중인 포인트는 {point}원 입니다.</p>
					</div>
				) : null}
			  </div>
	   }
  }
}

위와 같이 삼항 연산자로 작성할 경우 false 일 경우의 값을 반드시 할당해 주어야한다. 때문에 falsy값인 null 을 입력.

class Greetin extends Component {
	render() {
		const { isLogin, name, point } = this.props;

		return {
			<div>
				{isLogin && (
					<div>
						<p>{name}님 환영합니다!</p>
						<p>현재 보유중인 포인트는 {point}원 입니다.</p>
					</div>
				)}
			</div>
	   }
  }
}

이전 예제와는 달리 && 연산자를 활용해 줄 경우 true인 경우만 렌더링 하겠다는 의도를 전달하면서 동시에 null을 생략할 수 있어 가독성이 좋아진다.

&& 연산자 에 익숙하지 않다면 👉 MDN Short-circuit Evaluation 을 참고해주세요!

&&연산자 사용 시 주의해야할 점!

• 변수가 숫자 타입인 경우 0은 false 이다.
• 변수가 문자열 타입인 경우 빈 문자열“”도 false이다.

🚨 주의 : React.StrictMode에 의해 특정 라이프사이클 메서드가 2번 불릴 수 있음 (문제 X, 정상 O)

Strict 모드가 자동으로 부작용을 찾아주는 것은 불가능합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있다.

• 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• State updater 함수 (setState의 첫 번째 인자)
• useState, useMemo 그리고 useReducer에 전달되는 함수

<응용코드>

곧 추가예정....