컴포넌트 하나로 수정,추가 모달 만들기

내가 필요한 모달은
1. 상세정보로 입장해서 수정 가능한 부분을 수정하고 저장하기
2. 추가 버튼을 누르면 비어있는 부분을 모두 채워서 저장하기
이렇게 두가지였다

한 페이지에서 들어가는것은 물론, CSS가 100% 동일했다.

상세정보의 가짓수가 10가지씩이나 되면 따로 만들었을것도 같지만
수정을 요하는 정보가 많아봤자 2,3개였기 때문에 하나로 이용하기로 했다.

1. 컴포넌트 제작하고 틀 만들기

• 이건 당연히 둘이 똑같은 틀을 공유한다

2. props로 추가 or 수정을 구별할 값을 넘긴다

• 나같은 경우엔 data의 id 값이었다.

<DataModal modalId={modalId} />

3. 받아온 id값을 이용하여 나머지를 구성한다.

// 헤더 부분
<h3>{modalId === null ? "정보추가" : "정보상세"}</h3>

4. +)submit 하는 로직에서 받아온 id값에 따라 새 정보를 post 할지, 기존 정보를 update할지 각각 다른 logic 사용하기

 

처음 입사했을땐 state, props에 대해 어렵다고 느껴져서 공부에 손도 가지 않고... 활용하는데 애를 먹었었는데

계속 부딪히고 이들을 좀 더 유연하게 사용하니 좀 더 뿌듯해지는거같다.