[소플의 처음 만난 리액트] 9장 실습문제

Cnt.jsx

import React, { useState } from "react";

function Cnt() {
  const [count, setCount] = useState(0);

  const increaseCount = () => {
		// 동일한 표현법
    setCount(count+1);
    // setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      {count ? <h1>현재 카운트: {count}</h1> : ""}
      <button onClick={increaseCount}>증가</button>
    </div>
  )
}

export default Cnt;

핵심 키워드

• setCount() 메서드를 통해 count의 수치를 변경할 때 count++라고 입력하면 오류가 발생한다.

• 에러가 발생하는 이유는 count를 const로 선언했기 때문이다. count++는 count=count+1 과 같은 식으로 표현할 수 있는데, 이는 count를 재할당 하는 것과 같기 때문에 에러가 발생한다.

Toolbar.jsx

import React from "react";

const styles = {
  wrapper: {
    padding: 16,
    display: "flex",
    flexDirection: "row",
    borderBottom: "1px solid grey",
  },
  greeting: {
    marginRight: 8,
  },
};

function Toolbar(props){
  const {isLoggedIn, onClickLogin, onClickLogout} = props;

  return(
    <div style={styles.wrapper}>
      {isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}

      {isLoggedIn ? (
        <button onClick={onClickLogout}>로그아웃</button>
      ) : (
        <button onClick={onClickLogin}>로그인</button>
      )}
    </div>
  )
}

export default Toolbar;

LandingPage.jsx

import React, { useState } from "react";
import Toolbar from "./Toolbar";

function LandingPage(props) {
  // 자식 컨테이너가 부모 컨테이너의 상태를 변경하는 구조
  const [isLoggedIn, setIsloggedIn] = useState(false);

  const onClickLogin = () => {
    setIsloggedIn(true);
  };

  const onClickLogout = () => {
    setIsloggedIn(false);
  };

  return (
    <div>
      <Toolbar
        isLoggedIn={isLoggedIn}
        onClickLogin={onClickLogin}
        onClickLogout={onClickLogout}
      />
      <div style={{ padding: 16 }}>소플과 함께하는 리액트 공부!</div>
      {/* 만약 텍스트도 state에 영향 받게 하고싶다면? */}
      {/* {isLoggedIn && <div style={{ padding: 16 }}>소플과 함께하는 리액트 공부!</div>} */}
    </div>
  );
}

export default LandingPage;

핵심 키워드

• 로그인 여부를 나타내는 툴바를 보면 로그인 된 상태에서는 로그아웃 버튼이, 로그아웃 된 상태에서는 로그인 버튼이 나타난다.

• 해당 기능을 구현하기 위해 useState() 훅을 이용한다.

결론!