5.3 리스트 렌더링 및 조건부 Content: 토글 버튼 만들기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

토글 버튼

토글 버튼을 만들어서 렌더링을 on / off 해보자

state를 만들어 기본값을 false로 준다.

const [isEditing, setIsEditing] = useState(false); // 토글용 state, default값을 false로 준다.

2개의 함수를 만들어 실행될때 각각 true와 false 값으로 바뀌도록 해준다.

  const startEditingHandler = () => {
    setIsEditing(true); // 함수가 실행되면 true로 바꿈
  };

  const stopEditingHandler = () => {
    setIsEditing(false); // 함수가 실행되면 false 바꿈
  };

state의 초기값을 false로 표현할때 state 앞에 !를 붙이고 && 를 사용하여 false일때 렌더할 코드를 작성

true일때 반대로 작성

  return (
    <div className="new-expense">
      {!isEditing && ( // 초기값, isEditing이 false 이면 Add New Expense 버튼 태그를 보여줌
        <button onClick={startEditingHandler}>Add New Expense</button> // 버튼이 클릭되면 isEditing을 true로 바꿈
      )}
      {isEditing && ( // isEditing이 true가 되면 버튼 태그를 없애고 ExpenseForm 컴포넌트를 보여줌
        <ExpenseForm
          onSaveExpenseData={saveExpenseDataHandler}
          onCancel={stopEditingHandler} // onCancel이 실행 되면 isEditing을 false로 바꿈
        />
      )}
    </div>
  );