Lv.3 과제

button, input, modal 컴포넌트로 만들어 재사용 가능하게 만드는것을 했다.

button

입력값이 없어 어렵지 않았다.

input

• 값을 받아서 바꾸는 부분을 컴포넌트에서 해야하는지 재사용하는 부분에서 해야하는지 어려웠다.
• 컴포넌트는 기본설정 느낌으로 어떤 prop이 들어왔을때 어떻게 띄울지 까지만 작성했다.
• 페이지 부분에서 빈칸인지 확인 하고, value 를 받고, 저장한다.
• prop으로 넘기는건 input이 어떤 값을 받은건지(title), 기본 설정에 필요한 값들을 넘겼다.

modal

• display: none을 사용해서 만들었는데 좋지 못한 방법이다.
• 이렇게 사용한다

{isFirstModalOpen && (<Modal 
                        closeModal={() => setIsFirstModalOpen(false)}
                        text="닫기와 확인 버튼 2개가 있고, 외부 영역을 눌러도 모달이 닫히지 않아요." 
                      />)}

• isFirstModalOpen 이 true이면 모달창이 열린다.

아직 사용법이 많이 익숙하지 않아서 이해하는것에도, 작성하는것에도 어려움이 많다.