728x90 300x250 전체 글1081 조건부로 여러 요소 렌더링하기 React Fragment를 사용해 조건에 따라 여러 요소를 렌더링할 수 있다.function Example({ isAdmin, isUser }) { return ( {isAdmin && ( Admin Panel You have full access. )} {isUser && !isAdmin && ( User Dashboard Welcome to your dashboard. )} {!isAdmin && !isUser && ( Guest Access Please log in to see .. 2025. 1. 6. 리액트 null을 활용해서 아무것도 렌더링 되지 않도록 하기 JSX에서 조건부 삼항연산자를 활용해서 아무것도 렌더링되지 않도록 할 수 있다.조건이 거짓인 경우 null을 반환하해 렌더링을 생략하도록 만든다.function Example({ showMessage }) { return ( {showMessage ? Hello, World! : null} );} showMessage가 false이면 아무것도 렌더링되지 않는다. 2025. 1. 5. 조건에 따라 동적으로 css 클래스 적용하기 function Example({ isActive }) { return ( Click Me );} isActive가 true이면 class="active", false이면 class="inactive" 적용 2025. 1. 4. 리액트에서 인라인 조건이란? 인라인 조건(inline conditional)인라인은 라인 안 의미 그대로 해당 코드가 필요한곳 안에 직접 작성한 코드를 말한다.즉 조건문을 따로 분리하지 않고 JSX 내부에서 바로 작성하는 것이 인라인 조건의 본질이다. 아래는 자주 사용되는 인라인 조건 작성 방식과 사용법이다. 1. 삼항 연산자조건 ? 참일 때 렌더링 : 거짓일 때 렌더링 function Example({ isLoggedIn }) { return ( {isLoggedIn ? Welcome back! : Please log in.} );} 2. && 논리 연산자조건이 참일 때만 특정 요소를 렌더링조건 && 렌더링할 요소 function Example({ hasNotifications }) { return .. 2025. 1. 3. 이전 1 2 3 4 ··· 271 다음 728x90 반응형