[React] (리액트 공부하기 23) 엘리먼트 변수

1. LoginButton과 LogoutButton 컴포넌트

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      로그인
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      로그아웃
	</button>
  );
}

설명

• LoginButton과 LogoutButton은 각각 "로그인" "로그아웃" 버튼을 렌더링하는 컴포넌트이다.
• props.onClick은 부모 컴포넌트에서 전달받은 클릭 이벤트 핸들러이다. 버튼을 클릭하면 해당 핸들러가 실행 된다.

---

2. LoginControl 컴포넌트

function LoginControl(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false); // 상태를 정의
  
  const handleLoginClick = () => {
    setIsLoggedIn(true); // 로그인 상태로 변경
  };
  
  const handleLogoutClick = () => {
    setIsLoggedIn(false); // 로그아웃 상태로 변경
  };
  
  let button;
  
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }
  
  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

1. useState(false)

• 컴포넌트 상태를 관리하기 위해 useState를 사용한다.
• 초기 상태는 false이며, 사용자가 로그인되지 않은 상태를 나타낸다.

2. handleLoginClick, handleLogoutClick

• 각각 로그인과 로그아웃 버튼이 클릭되었을 때 호출되는 함수이다.
• setIsLoggedIn(true) 또는 setIsLogged(false)를 호출하여 상태를 업데이트 한다.

3. button 변수

• isLoggedIn 상태에 따라 LoginButton 또는 LogoutButton 컴포넌트를 할당한다.
• isLoggedIn이 true라면 로그아웃 버튼을, false라면 로그인 버튼을 렌더링 한다.

4. return 구문

• <Greeting isLoggedIn={isLoggedIn /> 사용자에게 환영 메시지를 보여준다. isLoggedIn에 따라 다르게 렌더링이 된다.
• {button}: if 조건에 따라 선택된 버튼 컴포넌트를 렌더링한다.

---

3. Greeting 컴포넌트

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <h1>다시 오셨군요!</h1>;
    }
    return <h1>회원가입을 해 주세요.</h1>;
}

• Greeting 컴포넌트는 로그인 여부에 따라 다른 메시지를 보여준다.

---

4. 핵심 포인트

1. 조건부 렌더링:

• 상태(isLoggedIn)에 따라 렌더링할 내용을 다르게 한다.

2. 엘리먼트 변수:

• button 변수를 사용하여 조건에 따라 버튼 컴포넌트를 동적으로 결정한다.

3. 컴포넌트 재사용성:

• LoginButton과 LogoutButton 컴포넌트를 분리하여 재사용 가능하게 설계하였다.