글 작성페이지 input 나누기 TIL(39)

리액트로 시작하는 첫 번쨰 프로젝트가 시작했다.

글 작성페이지를 맡게되었는데  페이지에 모든 곳이 다 input이다. type만 다른...ㅎ

todo를 했을때처럼 하다보니 가만있어보자.. input 컴포넌트를 하나 만들어놓고 이것을 재사용 하면 좋겠다라는 생각이 들었다.

그럼 행동으로 옮겨야지🥸

---

1.내가 만난 문제

  👍나의 지금 구조

 <form> 
   <div className="inputbody"> 
      <div className="inputs">
           <Select>
               <Input>
                   <Button>

Input을 들어가면 거기서 또 세부적인 제목,작성자,비밀번호 이 3가지의 input이 필요하다.

그래서 그안에서 또 <제목><작성자><비밀번호>로 나눌려고 보니까 그럼 또 그 안에 input이라는 가장 하위 컴포넌트들을 불러와야하는

구조였다.

또 난 Input컴포넌트 작성을 위해 페이지를 하나 더 만들어야하고,팀프로젝트다 보니 오히려 많은 파일들을 팀원들이 보기 힘들꺼같다라는

판단을 내렸다. 또 비효율적인것같았다. 아무리 쪼개도 그건...ㅎ 너무 타고 들어가는것도 무리

 

2.그래서 내가 한 시도는❗️

 <form> 
   <div className="inputbody"> 
      <div className="inputs">
           <Select>
               <Input>
                <Input>
                <Input>
                   <Button>

바로 여기다가 필요한 구조를 만들었다.

그리고 원래 Input으로 타고 들어가면 나와야 할 파일에 Input 하위 컴포넌트를 만들기로했다.

 

3.해결?🧐

하나의 input으로 필요한 input을 다 만드는것도 성공했고, 그에 따라서 디자인과 속성들을 props로 전달하여 각기 다른 디자인도

가능하게 만들었다.

 

4.✨꺠우치고 얻은거

 이렇게 만들고 보니까 음 속성을 다르게 줘야할 수록 props가 많이 들어간다는거...?

그래서 input component에 import가 한가득이라는거

주로 html에 대한 속성이다보니 어쩔수가 없는 것같다.

최대한 적절한 디자인과 효율을 뽑아서 만들어야 할 것같다.

 

버튼도 똑같이 하면 하나의 버튼으로 프로젝트의 모든 버튼을 대체할 수 있을꺼같다.

미리 구현해보니까 다음은 어떻게 해야할 지 감이 잡힌다.

 

오늘의 TIL 끝😎