close

조건부 렌더링 및 루프 React

렌더링 조건 및 루프는 React JSX의 조건문 및 루프 구조를 사용하여 수행됩니다.

 

1. 렌더링 조건

- 사용: JSX의 구조를 사용하여 조건을 확인하고 해당 조건에 따라 다른 요소를 렌더링할 수 있습니다. if-else if-else

For 예:

function List({ list }) {  
  if(!list) {  
    return null;  
  }  
  
  if(!list.length) {  
    return <p>Sorry.</p>;  
  } else {  
    return( 
      <div>  
        {list.map(item => <ListItem item={item} />)}  
      </div>  
   );  
  }  
}

- 삼항 연산자 사용: 삼항 연산자를 사용하여 JSX에서 구조를 단축할 수도 있습니다. if-else

For 예:

 {isLoggedin ? <WelcomeUser />: <Login />}

- 논리 && 연산자 사용: 조건이 참인 경우에만 요소를 표시하려는 경우 논리 && 연산자를 사용할 수 있습니다.

For 예:

{isLoggedIn && <WelcomeUser />}

 

2. 렌더링 루프

- 사용: 이 메서드를 사용하여 배열을 반복하고 JSX에서 해당 요소를 렌더링할 수 있습니다. map map

For 예 

 {users.map((user) =>( 
       <li key={user.id}>{user.name}</li>  
))}

- 루프 사용: 루프를 사용하여 배열을 반복하고 JSX에서 해당 요소를 렌더링할 for 수도 있습니다. for

For 예:

let usersList = [];
for(let i = 0; i < users.length; i++) {  
  usersList.push(<li key={users[i].id}>{users[i].name}</li>);  
}  
return <ul>{usersList}</ul>;

- Each 사용: Each 메서드를 사용하여 배열을 반복하고 JSX에서 해당 요소를 렌더링할 for 수도 있습니다. for

For 예:

let usersList = [];  
users.forEach((user) => {  
  usersList.push(<li key={user.id}>{user.name}</li>);  
});  
return <ul>{usersList}</ul>;

 

조건 및 루프를 사용하면 React 유연하고 동적인 UI를 만들 수 있습니다. JSX에서 조건문과 루프 구조를 사용하여 다양한 요소를 표시하고 React 애플리케이션의 데이터를 기반으로 목록을 생성할 수 있습니다.