Conversation
| const [preview, setPreview] = useState(); | ||
| const [value, setValue] = useState(); |
There was a problem hiding this comment.
useState에 초기값을 넣어주지않는다면 자동으로 undefined가 들어갑니다! 그러면 state의 type도 undefined가 되어요!
원시값이면 type을 선언해줄 필요까지는 없지만 초기값을 넣어줘어야한답니다! 아니면 | null도 하나의 방법이겠구요!
| @@ -0,0 +1,137 @@ | |||
| import styles from "./styles.module.scss"; | |||
| import plusIcon from "@/assets/icons/ic_plus.png"; | |||
| import { ST } from "next/dist/shared/lib/utils"; | |||
| const handleInput = (e) => { | ||
| setFormState({ | ||
| ...formState, | ||
| [e.target.name]: e.target.value, | ||
| }); | ||
| }; | ||
|
|
||
| const handleChange = (e) => { | ||
| const nextValue = e.target.files[0]; | ||
| setValue(nextValue); | ||
| }; |
There was a problem hiding this comment.
각각의 event 타입도 선언을 해주면, 사용하는곳에서 조금 더 정확히 사용할 수 있습니다!
There was a problem hiding this comment.
addBoard 로 컴포넌트 이름을 바꿔주세요 😁
이 컴포넌트안에 너무 많은 컴포넌트들이 있는 것같아요!
파일 업로드를 할 수 있는 부분을 따로 뺀다면, 향후 어디서든 가져다 사용할 수 있고, 가독성도 늘어날 것 같습니다!
사실 파일업로드 뿐 아니라 기본 input이나 textArea도 제어컴포넌트와 함께 새로운 공용컴포넌트로 만들 수 있죠!
| 등록 | ||
| </button> | ||
| </div> | ||
| <form> |
There was a problem hiding this comment.
아직 api가 없어서 그런것같지만 onSubmit에 대한 핸들러가 없네요!
그래도 버튼을 클릭하면 무언가 동작되는데 왜그런지는 혹시 아실까요?!
There was a problem hiding this comment.
실제 데이터를 받기전에 mock으로 만드신 것은 아주 좋은 방법입니다!
그런데 조금 더 실제 데이터를 받는것처럼 만들면 나중에 연결할 때 더 편해요!
예를들어 상수로 const MOCK_DATA = {value: '혹시 사용기간이 어떻게 되실까요?'; time: 1}이런식으로 해두고 사용ㅇ하는곳에서는 MOCK_DATA.value나 MOCK_DTA.time 이런식으로요. 혹은 props를 받게해서 부모에서 내려줄수도있구요!
| <Comment /> | ||
| <Comment /> | ||
| <Comment /> |
There was a problem hiding this comment.
여기서 여러번 사용될것을 생각하면 아가 Comment컴포넌트에 남긴 코멘트에서 props를 받게하고 여기서 mock데이터 배열로 만들어서 map을 만드는게 나아보이는군요!
| @@ -16,7 +16,10 @@ export default function BestPosts() { | |||
| const [posts, setPosts] = useState<Post[]>([]); | |||
| const [loading, setLoading] = useState(true); | |||
| const [pageSize, setPageSize] = useState(3); | |||
|
|
|||
| const BREAKPOINTS = { | |||
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게