요약

리액트에서 추가와 수정 페이지를 같이 쓰는 방법은 간단히 말해,

1. 추가 form 컴포넌트를 만들고 (예) ㄱ. <CreateContact>)
2. 추가하기 버튼 onClick시 ㄱ. 컴포넌트를 리턴해준다
3. 수정하기 버튼 onClick시 ㄱ. 컴포넌트를 리턴해주는데,
   선택된 유저데이터, 수정완료시 실행될 function selectedUserData와 onUpdateFunc 같은 state를 2. 와 달리 넣어준다.
4. 추가 form 컴포넌트에 초기값을
   selectUserData ? selectUserData : "" 와 같이 조건 분기 해준다.
   다른 세부적인 것도 조건분기로 처리를...

즉 포인트는 React 사용 전에는 추가/수정 page를 식별가능한 String state를 넣어줘서 조건분기 했던거 같은데, React를 사용함으로써, 2,3과정 처럼
동일한 추가form 컴포넌트라도 각각 import 해서 (2에서 1개, 3에서 1개) 다른 방식으로 동일 컴포넌트 jsx를 사용해 줄수 있다.

code

1. 추가 컴포넌트를 만들고
   

2. 추가하기 버튼 클릭시 사용되는, import한 createContact 컴포넌트.
   

sidebar는 아래 사진처럼 랜더링 되있다.

3. 수정하기 버튼 클릭시 사용되는, import한 createContact 컴포넌트.
   
   소스 보면 ContactListing 부분이란걸 알 수 있는데,
   아래 사진처럼 리스트의 수정 페이지 부분인걸 알 수 있다. 수정이라 위 코드에선 유저 데이터인 selectContact 와 수정 완료 function인 onUpdateContact 가 전달된걸 알수 있다.
   즉 2,3 같은 CreateContact를 약간 다르게 사용하여 추가와 수정 페이지를 공통으로 사용한다.

4. CreateContact 페이지에서 조건분기 부분 :
   Formik를 보면 초기값을 수정/추가 페이지 따라 조건 분기로 다르게 주고 있다.
   
   selectContact데이터가 있나 없나에 따라 onSubmit 내부에 기본 데이터 형식을 다르게 두고 있다. 아래
   

• 참고
  
  CreateComponent를 모달로 난 사용했는데, open, close 함수, 거기에 따른 state는 추가, 수정 페이지 둘다 각각 만들어 줘야 한다.
  (당연히 둘다 컴포넌트를 다르게 사용하니 각각 만들어줘야..)