0. 조건부 렌더링 및 초기 코드
React를 배울 때 State를 배우면 꼭 배워야 할 것이 있습니다.
이것이 “조건부 렌더링”입니다.
이 방법은 특정 값에 따라 다른 구성 요소를 그리려는 경우에 사용됩니다.
인터넷에서 사용할 수 있는 몇 가지 방법이 있습니다.
글을 작성하기 위한 기본 코드는 다음과 같습니다.
app.js
< Komponententyp des Klassentyps >
import React, { Component } from "react";
import "./App.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: true,
};
}
render() {
return (
<div className="App">
<h2>조건부 렌더링 예시입니다.
</h2>
<div>
<button style={{margin: 10}}>Login</button>
</div>
<div>
<button style={{margin: 10}}>Logout</button>
</div>
</div>
);
}
}
export default App;< Funktionskomponentenformular >
import React, { Component } from "react";
import "./App.css";
import { useState } from "react";
export const App = () => {
const (isLoggedIn, setIsLoggedIn) = useState(true);
return (
<div className="App">
<h2>조건부 렌더링 예시입니다.
</h2>
<div>
<button style={{ margin: 10 }}>Login</button>
</div>
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
</div>
);
};
export default App;
상태를 저장하는 것이 전부이므로 useState를 사용하여 초기 값을 저장하고 계속할 수 있습니다.
Vite로 React 프로젝트를 만들었고,
초기화면은 이렇게 생겼습니다.
이제 여기에서 6가지 방법으로 조건부 렌더링을 시도합니다.
이 예제를 작성하기 전에
내 프로젝트를 기반으로
다음은 조건부 렌더링의 몇 가지 예입니다.
(1) 날짜를 가져오고 그 사람의 생일 이후에 결과를 표시합니다.
(출생 조디악 표지판, 일치하는 탄생석, 세대 정의 등)
(2) 특정 쿠키 값을 읽을 때 해당 값이 있으면 화면이 표시되고, 없으면 표시되지 않습니다.
(3) (현재 예) 로그인 시에는 로그아웃 버튼이 표시되고, 로그아웃 시에는 로그인 버튼이 표시됩니다.
조건부 렌더링은 많은 용도로 사용할 수 있습니다.
일반적으로 다음 상태는 useState에 의해 수정되고 다시 렌더링될 때 사용됩니다.
이제 예를 살펴보겠습니다.
1. if..else 문 사용
이것이 가장 기초적인 방법입니다.
성능이 좋지 않아 권장하지 않습니다.
이 방법은 피하는 것이 좋습니다.
< Klassentypkomponente >
import React, { Component } from "react";
import "./App.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: true,
};
}
render() {
let { isLoggedIn } = this.state;
console.log(isLoggedIn);
const authButton = () => {
if (isLoggedIn) {
return <button style={{ margin: 10 }}>Logout</button>;
} else {
return <button style={{ margin: 10 }}>Login</button>;
}
};
return (
<div className="App">
<h2>조건부 렌더링 예시 1번입니다.
</h2>
{authButton()}
</div>
);
}
}
export default App;
< Funktionskomponenten >
import React, { Component } from "react";
import "./App.css";
import { useState } from "react";
export const App = () => {
const (isLoggedIn, setIsLoggedIn) = useState(true);
if (isLoggedIn) {
return (
<>
<h2>조건부 렌더링 예시 1번입니다.
</h2>
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
</>
);
} else {
return (
<>
<h2>조건부 렌더링 예시 1번입니다.
</h2>
<div>
<button style={{ margin: 10 }}>Login</button>
</div>
</>
);
}
};
export default App;
또는 구성 요소를 다른 기능으로 분할하면 다음과 같이 구성할 수 있습니다.
import React, { Component } from "react";
import "./App.css";
import { useState } from "react";
const AuthButton = (props) => {
const (isLoggedIn, setIsLoggedIn) = useState(props.isLoggedIn);
if (isLoggedIn) {
return (
<>
<h2>조건부 렌더링 예시 1번입니다.
</h2>
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
</>
);
} else {
return (
<>
<h2>조건부 렌더링 예시 1번입니다.
</h2>
<div>
<button style={{ margin: 10 }}>Login</button>
</div>
</>
);
}
};
const App = () => {
const isLoggedIn = true;
return <AuthButton isLoggedIn={isLoggedIn} />;
};
export default App;
출력은 다음과 같습니다.
isLoggedIn 값에 따라 표시되는 버튼이 다르게 보입니다.
포인트 2에서 기능적 구성 요소로 분류해 보겠습니다.
2. switch 문 사용
switch-case 문을 사용하는 방법.
조건이 2개(3, 4…) 이상일 때 유용합니다.
또한 주어진 변수 내에서 사례를 명확하게 볼 수 있습니다.
가독성도 좋습니다.
import React, { Component } from "react";
import "./App.css";
import { useState } from "react";
const AuthButton = (props) => {
const (isLoggedIn, setIsLoggedIn) = useState(props.isLoggedIn);
switch (isLoggedIn) {
case true:
return (
<>
<h2>조건부 렌더링 예시 2번입니다.
</h2>
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
</>
);
case false:
return (
<>
<h2>조건부 렌더링 예시 2번입니다.
</h2>
<div>
<button style={{ margin: 10 }}>Login</button>
</div>
</>
);
default:
return null;
}
};
const App = () => {
const isLoggedIn = true;
console.log("App >>", isLoggedIn);
return <AuthButton isLoggedIn={isLoggedIn} />;
};
export default App;
3. 요인변수의 활용
멤버 변수는 조건부 렌더링을 별도의 함수로 추출하여 사용하는 것과 유사합니다.
요인 변수란 무엇입니까?
JSX 요소가 포함된 변수(하단의 AuthButton)
import React from "react";
import "./App.css";
import { useState } from "react";
const App = () => {
const (isLoggedIn, setIsLoggedIn) = useState(true);
let AuthButton;
if (isLoggedIn) {
AuthButton = (
<>
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
</>
);
} else {
AuthButton = (
<>
<div>
<button style={{ margin: 10 }}>Login</button>
</div>
</>
);
}
return (
<>
<h2>조건부 렌더링 예시 3번입니다.
</h2>
{AuthButton}
</>
);
};
export default App;
이 경우 조건에 따라 특정 변수에 JSX 값을 할당합니다.
식 결과는 아래와 같이 그려집니다.
4. 삼항 연산자
삼항 연산자는 조건부 렌더링의 많은 예 중 하나일 뿐입니다.
삼항 연산자다음과 같이 사용됩니다.
특정 조건? 참이면 식 : 거짓이면 식
import React from "react";
import "./App.css";
import { useState } from "react";
const App = () => {
const (isLoggedIn, setIsLoggedIn) = useState(true);
return (
<>
<h2>조건부 렌더링 예시 4번입니다.
</h2>
{isLoggedIn ? (
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
) : (
<div>
<button style={{ margin: 10 }}>Login</button>
</div>
)}
</>
);
};
export default App;
출력물이 너무 길면 구성 요소의 가독성에 심각한 영향을 미칩니다.
별도의 함수를 만들어 적어둡니다.
(삼항 연산자는 return 문에 지정됩니다.
)
5. 논리 연산자(&&)
&& 연산자는 조건이 참이면 실행됩니다.
import React from "react";
import "./App.css";
import { useState } from "react";
const App = () => {
const (isLoggedIn, setIsLoggedIn) = useState(true);
return (
<>
<h2>조건부 렌더링 예시 5번입니다.
</h2>
{isLoggedIn && (
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
)}
</>
);
};
export default App;
삼항 연산자와 달리 특정 조건이 참일 때 사용하는 표현식입니다.
영어로는 short-circuit evaluation이라고 합니다.
6. IIEF(Immediate Functional Expressions)
https://developer.mozilla.org/en-US/docs/Glossary/IIFE
IIFE – MDN 웹 문서 용어집: 웹 관련 용어의 정의 | MDN
IIFE(Immediately Invoked Function Expression)는 정의되는 즉시 실행되는 JavaScript 함수입니다.
IIFE 이름은 Ben Alman이 자신의 블로그에서 홍보합니다.
developer.mozilla.org
IIFE는 문자 그대로 “선언되자마자 실행되는 함수”입니다.
신생아가 태어나 자마자 아무데도 두지 않고 즉시 뛰어 내립니다.
나중에 재사용하기 위해 저장하는 대신 선언 직후에 실행합니다.
그렇게 하면 이 코드 안에 모든 JavaScript 코드를 작성할 수 있기 때문입니다.
JSX로 작성할 수 없다는 장점이 있습니다.
import React from "react";
import "./App.css";
import { useState } from "react";
const App = () => {
const (isLoggedIn, setIsLoggedIn) = useState(true);
return (
<>
<h2>조건부 렌더링 예시 6번(IIFE)입니다.
</h2>
{(function () {
if (isLoggedIn) {
return (
<div>
<button style={{ margin: 10 }}>Logout</button>
</div>
);
} else {
<div>
<button style={{ margin: 10 }}>Login</button>
</div>;
}
})()}
</>
);
};
export default App;
function 키워드를 생략하고 다음과 같이 작성할 수도 있습니다.
{(() => {
if (isLoggedIn) {
return <button>Logout</button>;
} else {
return <button>Login</button>;
}
})()}양식은 함수를 괄호 ()로 묶고 괄호를 이스케이프하고 다시 한 쌍의 괄호를 만듭니다.
( function(){} )() <--- 이렇게 생겼습니다.
읽어볼 가치:
1. 조건부 렌더링에 대한 기사(클래스 유형 컴포넌트가 예로 사용됨)
React 애플리케이션에서 조건부 렌더링을 구현하는 7가지 방법 | 디지털오션
www.digitalocean.com
2. 조건부 렌더링 최적화
https://medium.com/@cowi4030/optimizing-conditional-rendering-in-react-3fee6b197a20
React에서 조건부 렌더링 최적화
우리는 React가 구성 요소 트리의 변경 사항을 찾기 위해 위에서 아래로 가상 DOM을 스캔하고 해당 부분을 업데이트한다는 것을 알고 있습니다.
medium.com
끝!