728x90 300x250 SMALL 분류 전체보기1117 엘리먼트 변수로 조건부 렌더링 효율적으로 구현하기 엘리먼트 변수란?React에서 엘리먼트 변수는 특정 JSX 엘리먼트를 변수에 저장한 다음, 이를 조건에 따라 렌더링하거나 재활용하는 방식으로 사용하는 개념이다.JSX 자체는 JavaScript 표현식으로 평가될 수 있으므로, 변수에 할당하거나 함수의 반환값으로 사용할 수 있다. 엘리먼트 변수를 사용하는 이유조건부 렌더링 간소화 : 복잡한 조건문을 JSX 내부에 작성하지 않고, 미리 조건에 맞는 엘리먼트 변수로 만들어 사용하면 코드가 더 깔끔해 진다.반복적인 렌더링 방지 : 조건에 따라 자주 사용되는 동일한 엘리먼트를 중복 작성하지 않고, 변수에 저장해 재활용할 수 있다.엘리먼트 변수 사용 예제function Greeting({ isLoggedIn }) { let message; if (isLogged.. 2025. 1. 2. 조건부 연산자 주의사항과 자세한 예시 1. 컴포넌트는 하나의 부모 태그로 감싸야 한다. 오류코드function Example() { return ( HelloWorld );} 위 코드는 "JSX elements must be wrapped in an enclosing tag" 오류를 발생시킨다. 수정코드function Example() { return ( Hello World );} 또는 React Fragment를 사용할 수 있다.function Example() { return ( Hello World );} React Fragment를 사용하면 리액트 컴포넌트는 반드시 하나의 루트 노드를 반환해야 한다는 원칙에 위배 되지 않으면서 dom에는 표시 되지 .. 2025. 1. 1. 리액트 : 조건부 렌더링 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. 이전 1 ··· 8 9 10 11 12 13 14 ··· 280 다음 728x90 반응형 LIST