728x90 300x250 SMALL Front-end/React65 엘리먼트 변수로 조건부 렌더링 효율적으로 구현하기 엘리먼트 변수란?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 2 3 4 5 6 ··· 17 다음 728x90 반응형 LIST