리액트)상품등록페이지만들기

1.상품등록페이지 분석+구현하기

 

1-1 상품이름, 상품가격,상품내용,상품이미지를 db에 넣어야한다

1-2 상품 이름,가격,내용은 input에 onchange 이벤트를 달아서 입력값을 감지후 해당 이름으로 state에 저장시킨다

1-3 상품이미지와  같이 저장시켜야하므로 상품등록시

post에 이미지와 form-data를 명시하여 이미지와 같이 저장할거라고 서버에 알려줘야한다.

1-4 submit을 누르면 페이지가 이동되니까 이벤트를 막는 e.preventdefault를 걸어줘야한다

1-5 이미지업로드 컴포넌트는 url을 추출하여 미리보기에 사용가능하도록한다

 

 

2.이미지파일과 상품정보 같이저장하기

 

2-1 상품정보는 onchange 이벤트를 item과연결한다.

2-2 input태그에 onchange를걸고 변화를 이벤트객체 키와 값으로넘겨서 setitem에 매핑시킨다.

2-3 input type=file에 이미지파일이 올라오는 변화가생기면 감지해서 setuploadfile에 넣는다

2-4 file은 이벤트객체배열에서 0번째이므로 저장시키면된다

2-5 input을 state에 모두옮겼으면 이제 서버로 보내기위해 보따리 formdata를 만든다

2-6 formdata에 키와값으로 file과 상품정보를 넣어준다

2-7 axios에 post로 보내며 파일이 같이 가야하므로 헤더에 multipart/form-data를 명시해준다

2-8 서버로 formdata를 보내면 내부의 키와값이 자동으로 컨토를러 파라미터와 매핑된다

 

3.객체 url을 만들어 미리보기구현하기

 

3-1 input type="file" 에 onchange로 함수호출하게한다

3-2이벤트객체에 0번인덱스 파일을 form데이터용으로 저장하고 또 객체url을 추출하여 저장한다

3-3 객체url저장한걸 다시 출력해주면 미리보기완성