인프런 커뮤니티 질문&답변

LoginForm 컴포넌트에서 AppLayout 컴포넌트의 props로 setIsLoggedIn을 받아올 때 밑에 빨간 줄이 뜨네요!

위 경고(?) 메시지가 떠서 구글 찾아보면서 propTypes 적용해봤는데
setIsLoggedIn이 isLoggedIn의 상태를 바꾸는 함수라 생각하여 아래와 같이 작성해봤는데 맞는지 여쭤보고 싶습니다!

빠르게 보시라고 LoginForm 컴포넌트 내용 전체 올릴게요!

import React, { useState, useCallback } from 'react';
import propTypes from 'prop-types';
import { Form, Input, Button } from 'antd';
import Link from 'next/link';
import styled from 'styled-components';

const ButtonWrapper = styled.div `
  margin-top: 10px;
`; // 백틱 안에는 CSS 적듯이 적으면 됨
// div 태그이면서 css가 적용된 ButtonWrapper 컴포넌트 사용 가능

const LoginForm = ({ setIsLoggedIn }) => {
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');

  const onChangeId = useCallback((e) => {
    setId(e.target.value);
  }, []);

  const onChangePassword = useCallback((e) => {
    setPassword(e.target.value);
  }, []); 

  // 배열 안에 id, password 작성하지 않으면 초기값을 기억하기 때문에 넣어줘야 함
  const onSubmitForm = useCallback(() => {
    console.log(id, password);
    setIsLoggedIn(true);
  }, [id, password]);

  return (
    <Form onFinish={onSubmitForm}>
      <div>
        <label htmlFor="user-id">아이디</label>
        <br />
        <Input name="user-id" value={id} onChange={onChangeId} />
      </div>
      <div>
        <label htmlFor="user-password">비밀번호</label>
        <Input
          name="user-password" 
          type="password"
          value={password}
          onChange={onChangePassword}
          required
        />
      </div>
      <ButtonWrapper>
        <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
        <Link href="/signup"><a><Button>회원가입</Button></a></Link>
      </ButtonWrapper>
    </Form>
  );
};

LoginForm.propTypes = {
  setIsLoggedIn: propTypes.func.isRequired,
};

LoginForm.defaultProps = {
  setIsLoggedIn: () => console.warn('setIsLoggedIn 값이 없습니다')
};

export default LoginForm;