728x90 300x250 SMALL 2024/1231 리액트 : 조건부 렌더링 if, &&, ||, 삼항연산자, switch 등 리액트의 조건부 렌더링은 특정 조건에 따라 컴포넌트를 렌더링하거나 렌더링하지 않는 방식이다.리액트는 UI렌더링을 함수 호출처럼 처리하므로, 조건부 렌더링은 JavaScript의 조건문을 활용하여 구현한다.단순한 조건에는 삼항 연산자나 &&, 복잡한 조건에는 if나 switch, 여러 조건이 겹칠 경우에는 컴포넌트 분리를 고려한다. 1. if문을 사용한 조건부 렌더링가장 기본적인 방식으로 조건에 따라 반환할 컴포넌트를 명확히 구분 할 때 사용된다.function Example({ isLoggedIn }) { if (isLoggedIn) { return Welcome back!; } return Please log in.;} isLoggedIn 값이 있으면 Welcome back! 출력값이 없으.. 2024. 12. 31. IIFE 즉시 실행 함수 (() => {}) IIFE(Immediately Invoked Function Expression)IIFE는 즉시 실행 함수로, 함수 선언과 동시에 실행된다.복잡한 조건부 렌더링에서 사용하면 동적으로 값을 계산하거나 여러 조건을 처리할 수 있다. function Example({ user }) { return ( {(() => { if (!user) return Please log in.; // user가 없으면 이 메시지 if (user.role === 'admin') return Welcome, Admin!; // admin인 경우 return Welcome, User!; // 기본값 })()} );} 함수 (() => {...}) 선언()로 즉.. 2024. 12. 30. || 논리 OR 연산자 :: 동작 원리 || 연산자는 논리 OR 연산자로 다음과 같은 방식으로 동작한다. 1. 왼쪽 값이 truthy(참)이면 왼쪽 값을 반환2. 왼쪽 값이 falsy(거짓)이면 오른쪽 값을 반환 리액트에서는 이 동작을 활용해 기본값을 설정하거나, 값이 없을 경우 대체값을 렌더링할 수 있다.|| 동작 예시function Example({ username }) { return {username || 'Guest'};} 만약 username값이 있을 경우 (John) 참이기 때문에 'John' 출력값이 없을 경우(null / undefined / false / ' ') 거짓으로 'Guest' 출력 주의할 점0도 falsy로 평가 된다. 숫자 0을 값으로 사용하려면 이를 처리하는 로직이 필요하다.function Example({ .. 2024. 12. 29. 클릭 이벤트 클래스형 컴포넌트, 클래스 필드 문법, 함수 컴포넌트 - 비공개 보호되어 있는 글 입니다. 2024. 12. 28. 이전 1 2 3 4 ··· 8 다음 728x90 반응형 LIST