[TIL] 2020-03-22

[ groomdue ]

- 처음 만난 React(리액트) 조건무 랜더링 중간까지 수강

- 웹 표준 사이트 만들기(2019) 01강 수강

 

[ 배운 내용 ]

 

[ HTML ]

- header, nav, side, contents, footer을 이용해 레이아웃을 알맞게 배치하는 연습함.

 

[ React }

<Conditional Rendering>

Condition Rendering 이란?
- 조건이라는 의미를 가지고 있으며, 조건에 따른 렌더링을 의미한다.
- 쉽게 말하자면, 조건이 True(참)이면 버튼을 보여주고, False(거짓)이면 버튼을 가리는 것과 같이
조건에 따라서 다른 결과를 보여준다.

// 회원인 경우
function UserGreeting(props) {
	return <h1>Welcome back!</h1>
}

// 회원이 아닌 경우
function GuestGreeting(props) {
	return <h1>Please sing up.</h1>
}

// Greeting 이라는 function 컴포넌트
function Greeting(props) {
	const isLoggedIn = props.isLoggedIn;
	if (isLoggedIn) {
	  // 회원일 경우
	  return <UserGreeting />
	}
	// 회원이 아닐 경우
	return <GuestGreeting />
}
// 사용자가 로그인 했는지 안 했는지에 따른 다른 컴포넌트를 랜더링
ReactDOM.render(
	<Greeting isLoggedIn={false} />
	document.getElementById('root')
	);

<Element Variables> 

[예제]

// 로그아웃 일때, 로그인을 할 수 있게 
function LoginButton(props){
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    );
}

// 로그인을 했을 때, 로그아웃을 할 수 있게
function LogoutButton(props){
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    )
}


handleLoginClick(){
    this.setState({isLoggedIn: true});
}

handleLogoutClick(){
    this.setState({isLoggedIn: false});
}

render(){
    const isLoggedIn = this.StaticRange.isLoggedIn;
    let button;

// button Variables을 만드는 부분
    if(isLoggedIn){
        button =<LogoutButton onClick={this.handleLogoutClick} />
    }else{
        button =<LogoutButton onClick={this.handleLoginClick} />
    }

    return(
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
        </div>
    );
}

- {button} -> 이 부분이 바로 Element Variables이라고 한다. 
- button이라는 변수(Variables) 안에 , 로그인 버튼이나, 로그아웃 버튼을 넣음 즉, Element를 집어넣은 것을 의미한다.
- 이러한 형태를 Element Variables이라 부른다.