티스토리 뷰

차곡차곡/Frontend

[React] 조건부 렌더링하기

p퐝유p 2022. 4. 18. 00:34

★로그인 상태일 때, 사용할 컴포넌트와 비로그인 상태일 때 사용할 컴포넌트 생성하기

1. UserGreeting 컴포넌트를 선언한다.

2. GuestGreeting 컴포넌트를 선언한다.

3. Greeting 컴포넌트를 선언한다. props.isLoggedIn 값이 true ->UserGreeting / False -> GuestGreeting이 되도록 한다.

4. ReactDOM에 렌더링한다. Greeting의 인자값으로 isLoggedIn의 상태도 렌더링한다.

 

 

완성!

★로그인 버튼 클릭 시, isLogin의 state 변경되어 login과 logout state 컨트롤 하기.

1. Greeting 컴포넌트 생성 : 로그인/ 비로그인 상태에 따른 인사 메시지를 조건에 따라 랜더링을 담당하는 컴포넌트

 

2. 로그인 / 로그아웃 버튼을 생성한다.

 

3. LoginControl 컴포넌트 생성 : 로그인 메시지 + 로그인 버튼을 포함하는 컴포넌트, 로그인 / 로그아웃 처리 담당

 

4. State를 활용한 로그인/ 로그아웃 여부 결정 : 기본값을 false로 설정

   State를 props 로 활용, Greeting 컴포넌트에게 State를 내려줌.

 

5. ClickHandler 작성 : Button의 onClick property에 넘겨주도록 입력.

 

6. onclick = { ClickHanler}로 각 버튼에 넘겨주어서 props.onClick으로 이벤트 메서드 전달받아 사용할 수 있도록 한다.

 

이렇게 변경해도 위와 같이 똑같은 화면이 렌더링 될 수 있다. 

 

★ MailBox 컴포넌트 : 열람하지 않은 메시지 개수 반환하기

 

1. messages를 3개로 선언하자.

 

2. Mailbox 컴포넌트를 만들자. 

 

3. Mailbox 컴포넌트 props 안에 unreadMessages를 만들자.

 

4. Messages는 배열이므로, Messages.length는 읽지 않는 메시지 개수가 된다. 

   && 연산은 왼쪽의 조건식이 모두 true 일 때만, ture를 반환한다.

   앞의 조건식이 false 라면, 결과는 false이다. 

 

완성!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login_control</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"> </div>
    <script type="text/babel">
        
        // 로그인 상태일 때, 사용할 컴포넌트

        const UserGreeting = props => <h1>Welcome back!</h1>

        // 비로그인 상태일 때, 사용할 컴포넌트

        const GuestGreeting = props => <h1> Please, sign up. </h1>

        const Greeting = props => props.isLoggedIn? <UserGreeting/> : <GuestGreeting/>

        ReactDOM.render(<Greeting isLoggedIn={false}/>,document.getElementById('root'));
      
        
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login_control</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"> </div>
    <script type="text/babel">

        const { useState } = React;
        
        const UserGreeting = props => <h1>Welcome back!</h1>;
        const GuestGreeting = props => <h1> Please, sign up. </h1>;
        const Greeting = props => props.isLoggedIn? <UserGreeting/> : <GuestGreeting/>;

        const LoginButton = props => <button onClick={props.onClick}>Login</button>;
        const LogoutButton = props => <button onClick={props.onClick}>Logout</button>;

        const LoginControl= props => {

            const [isLoggedIn,setIsLoggedIn] = useState(false);
            
            const loginButtonClickHandler = () => setIsLoggedIn(!isLoggedIn);

            return (
                <>
                    {<Greeting isLoggedIn = {isLoggedIn}/>}
                    {isLoggedIn? <LogoutButton onClick = {loginButtonClickHandler}/> 
                                : <LoginButton onClick = {loginButtonClickHandler}/>}
                </>
            );   
        };
        
        ReactDOM.render(<LoginControl/>,document.getElementById('root')); 
        
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root">

    </div>
    <script type="text/babel">
        
        const messages = ['React','Re:React','Re:Re:React'];


        const Mailbox = props => {

            const unreadMessages = props.unreadMessages;

            return (
                <>
                    <h1>Hello!</h1>

                     {unreadMessages.length>0 && <h2>You have {unreadMessages.length} unread message.</h2>}
                </>
            )
        };


        ReactDOM.render(<Mailbox unreadMessages={messages}/>,document.getElementById('root'));

    </script>
</body>
</html>

'차곡차곡 > Frontend' 카테고리의 다른 글

[Java] 배열과 ArrayList (2)- Book 클래스 생성 후, 책의 제목/저자 출력하기  (0) 2022.04.27
[React] 리스트와 Key  (0) 2022.04.18
[React] 이벤트 처리하기 / 토글 버튼 클릭에 따라 전구 켜기  (0) 2022.04.17
[React] Props와 State / 리액트로 클릭 카운터 만들기  (0) 2022.04.17
[React] Components와 Props / 컴포넌트 다이어트 성공기  (0) 2022.04.17