조건부 렌더링이란?
쉽게 말하자만 원하는 조건에 따라 다른 결과를 렌더링 하는것이다.
이를 위해 JS 연산자 if 나 조건부 연산자를 사용해 현재 상태에 맞는 UI 를 출력한다.
이렇게 두가지의 컴포넌트가 있다고 가정했을 때
function HelloApple(){
return <span>Hello, Apple!</span>
}
function HelloBanana(){
return <span>Hello, Banana!</span>
}
현재 과일에 맞는 컴포넌트를 띄우는 Fruit 컴포넌트이다.
fucntion Fruit (props){
const currentFruit = props.fruitName;
if(currentFruit === 'Apple')
return <HelloApple />
else
return <HelloBanana />
}
엘리먼트 변수 사용하기
변수를 사용해 출력의 다른 부분은 변하지 않은 상태로 컴포넌트의 일부를 조건부로 렌더링 할 수 있다.
변수를 사용하는 쉬운 예시를 보자!
import {useState} from 'react';
function Display(){
let [name, setName] = useState('Apple');
let current = ''; // 리엑트 엘리먼트를 할당 받을 변수
// 조건에 따라 엘리먼트 할당
if(name === 'Apple')
current = <HiApple />
else
current = <HiSomeone />
return (
<div>
<span>인사하세요!</span>
{current} // 조건부로 화면에 표시되는 부분
</div>
)
}
function HiApple() {
return <div>사과님 안녕하세요</div>;
}
function HiSomeone() {
return <div>익명님 안녕하세요</div>;
}
삼항 연산자 사용하기
JSX 문법에서는 자바스크립트 표현식을 { } 안에 포함할 수 있다.
삼항 연산자는 값으로 평가되는 표현식이기 때문에 JSX 문법에 사용할 수 있다!
삼항 연산자는
'조건' ? '값이 참인 경우 반환하는 값' : '값이 거짓인 경우 반환하는 값'
로 표현할 수 있다.
import {useState} from 'react';
function Display(){
let [name, setName] = useState("Apple");
let current = "";
return (
<div>
<span>인사하세요!</span>
// 삼항 연산자를 사용하는 경우
{name === "Apple" ? (current = <HiApple />) : (current = <HiSomeone />)}
</div>
);
}
function HiApple() {
return <div>사과님 안녕하세요</div>;
}
function HiSomeone() {
return <div>익명님 안녕하세요</div>;
}
&& 연산자 사용하는 방법
&& 연산자는 왼쪽에서 평가된 값이 '참' 인 경우 오른쪽의 값으로 평가되고, '거짓' 인 경우 렌더링되지 않는다.
즉, && 뒤의 엘리먼트는 조건이 true 일 때만 출력되고,
조건이 false 라면 뒤의 엘리먼트를 무시하고 건너뛴다!
하지만 false 표현식이 반환되기 때문에 주의가 필요하다.
import {useState} from 'react';
function Display(){
let [modal, setModal] = useState(false);
return (
<div>
<span>모달을 열까요?</span>
<button
onClick={() => {
setModal(!modal); // 클릭할 때 마다 모달 on/off
}}
>
클릭
</button>
{modal === true && <Modal />} // 조건부 렌더링 -> 논리 && 연산자로 If 를 인라인으로 표현
</div>
)
}
function Modal() {
return <div>이것은 모달입니다.</div>;
}
컴포넌트 렌더링 막기
다른 컴포넌트에 의해 컴포넌트가 렌더링 될 때 컴포넌트를 자체를 숨기고자 할 때가 있다!
이럴땐 렌더링 결과가 아니라 null 을 반환하면 된다.
rendering 시 null 을 반환하는 것은 생명주기 메소드 호출에 영향을 주지 않기 때문이다.
+) 조건부 스타일링
조건에 따라 스타일이 변경되어야 할 때 두가지 방법을 사용한다.
1. 동적 인라인 스타일 설정
2. 동적 css 클래스 설정
동적 인라인 스타일 설정
JSX 를 사용한 HTML 엘리먼트는 style을 사용해 인라인 스타일링을 할 수 있다.
이때 style은 객체를 값으로 가진다. 그리고 객체의 프로퍼티로 css의 프로퍼티를 작성 할 수 있다.
JSX 에서 style prop 의 프로퍼티로 작성할 때는
카멜 케이스(camel-case) 를 사용하거나
따옴표를 포함한 문자열,
대괄호 표기법 으로 계산된 프로퍼티를 사용해 작성한다
👀 간단 예시
function ButtonStyle() {
let list = [];
return (
<div>
{/* 카멜 케이스(camel-case) */}
<button style={{ backgroundColor: "red" }}>RED</button>
{/* 따옴표를 포함한 문자열 */}
<button style={{ "background-color": "yellow" }}>YELLOW</button>
{/* 대괄호 표기법 (현재 list 의 길이는 0 이므로 배경색은 파랑) */}
<button style={{ backgroundColor: list.length === 0 ? "blue" : "black" }}>
BLUE / BLACK
</button>
</div>
);
}
동적 CSS 클래스 설정
className의 값으로 동적 스타일링하는 방식이다.
function ButtonStyle2(){
const style = {
padding: "10px 20px",
backgroundColor: "orange",
};
return (
<div>
<button style={style}>버튼</button>
</div>
)
}
'React' 카테고리의 다른 글
[React] React 시작하기(7) - 폼 (0) | 2022.07.18 |
---|---|
[React] React 시작하기(6) - 리스트와 key (0) | 2022.07.16 |
[React] React 시작하기(4) - 이벤트 처리 (0) | 2022.07.08 |
[React] React 시작하기(2) - Component & Props (0) | 2022.07.06 |
[React] React 시작하기(3) - state 와 생명주기란 (0) | 2022.07.05 |