Front-end/React
조건부 연산자 주의사항과 자세한 예시
mooyou
2025. 1. 1. 20:58
728x90
300x250
SMALL
1. 컴포넌트는 하나의 부모 태그로 감싸야 한다.
오류코드
function Example() {
return (
<h1>Hello</h1><p>World</p>
);
}
위 코드는 "JSX elements must be wrapped in an enclosing tag" 오류를 발생시킨다.
수정코드
function Example() {
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
}
또는 React Fragment를 사용할 수 있다.
function Example() {
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);
}
React Fragment를 사용하면 리액트 컴포넌트는 반드시 하나의 루트 노드를 반환해야 한다는 원칙에 위배 되지 않으면서 dom에는 표시 되지 않는 부모태그를 만들 수 있다.
2. 코드 가독성 유지
조건부 렌더링이 복잡해지면 별도 컴포넌트로 분리하는 것이 가독성을 높이는 방법이다.
가독성이 낮은 코드
function Example({ user }) {
return (
<div>
{user ? (
user.role === 'admin' ? (
<h1>Welcome, Admin!</h1>
) : (
<h1>Welcome, User!</h1>
)
) : (
<h1>Please log in.</h1>
)}
</div>
);
}
컴포넌트 분리로 개선
function AdminMessage() {
return <h1>Welcome, Admin!</h1>;
}
function UserMessage() {
return <h1>Welcome, User!</h1>;
}
function Example({ user }) {
if (!user) return <h1>Please log in.</h1>;
return user.role === 'admin' ? <AdminMessage /> : <UserMessage />;
}
3.불필요한 렌더링 방지
조건부 렌더링은 성능 최적화와도 연관이 있다. 불필요한 컴포넌트를 렌더링 하지 않도록 주의해야 한다.
비효율적인 코드
function Example({ isLoggedIn }) {
return (
<div>
{isLoggedIn && <Header />}
<Content />
{isLoggedIn && <Footer />}
</div>
);
}
위 코드에서는 Header와 Footer가 조건부 렌더링되지만, 매번 평가가 이루어져 성능에 영향을 미칠 수 있다.
메모이제이션으로 최적화
const Header = React.memo(() => <h1>Welcome</h1>);
const Footer = React.memo(() => <footer>Footer</footer>);
function Example({ isLoggedIn }) {
return (
<div>
{isLoggedIn && <Header />}
<Content />
{isLoggedIn && <Footer />}
</div>
);
}
리액트는 컴포넌트가 다시 렌더링될 때 기본적으로 모든 자식 컴포넌트도 다시 렌더링 된다.
그러나 React.memo를 사용해서 메모이제이션 해주면 props이 변하지 않을 경우 다시 렌더링 되지 않는다.
728x90
반응형
LIST