React.useState()- 상태

KIM_EUNBI·2022년 2월 7일

React_Test

목록 보기
1/13

생성버튼을 누르면 메인사진이 바뀌게 하라


생성버튼 함수이름 -
handleFormSubmit

생성을 눌렀을때 메인사진을 바꿔야한다

메인사진을 바꾸기위해서

  1. 메인캣이라는 상태(React.useState) 를 만든다

const [mainCat, setMainCat] = React.useState(CAT1);

  1. const App 안에 이미지를 가져다놓는다

const CAT1 = "이미지주소";

const CAT2 = "이미지주소";

const CAT3 = "이미지주소";

  1. 이미지 가져온것을 가져다쓴다

1) 메인카드에 이미지를 넘길때 썼던 스테틱한 이미지가 아니고

MainCard img= {mainCat}

-> mainCat이란 동적인 상태를 넘긴다

2) 상태를 만든 곳에도 스테틱한 이미지가 아니라
가져온 const를 써서 클린하게 작성한다

const [mainCat, setMainCat] = React.useState(CAT1);

  1. 생성되었을때 넘겨줄 값을 적는다

function handleFormSubmit(event) {

event.preventDefault();

-> preventDefault는 브라우저가 리프레시되는것을 막아주는용도로 쓰였다

setCounter(counter + 1);

setMainCat(CAT2);

}

생성눌렀을때 사진이 바뀌면 성공

profile
김은비입니다.

0개의 댓글