-
[React] 버튼 기능개발, 리액트 state 변경하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 12. 10:20
좋아요 버튼 만들기
span 태그를 누르면 숫자가 1씩 증가하게끔 해야한다.
기존에 JavaScript로 구현할 때, addEventListener나 onclick 메소드를 사용했었다.
리액트에서도 onClick={클릭될때 실행할 JS}를 사용할 수 있다.
주의사항은 click을 적을 때 대문자로 적어야하고, JS를 { 함수() } 괄호로 감싸주어야 한다!
익명함수도 가능하다! { () => {} }이런식으로 적으면 된다.
let [따봉, 따봉변경] = useState(0); return ( <span onClick={() => { 따봉변경(따봉 + 1) }}>👍🏻</span> {따봉} )
위와 같이 state변경함수로 변경해야 재렌더링이 잘 일어난다. 스무스~!
단순히 함수 이름을 넣을 때 onClick = { 제목바꾸기() } 하면 함수가 바로 실행되서, 버튼을 눌렀을 때 실행하게 해야하므로, ()는 빼야 한다.
onClick = { 제목바꾸기 } 가 맞다.
State 수정할 때 직접 원본수정은 안된다. deep copy해서 수정해야 한다.
state를 수정하고 싶으면, 복사를 한뒤, 복사한 것을 수정한다.
const 제목바꾸기 = () => { let newArray = 글제목; newArray[0] = '구두 추천'; 글제목변경(newArray); }
위와 같이 하면 안된다. 위는 복사가 아니라 값 공유이다! 글제목과 newArray변수는 똑같은 값을 공유하고 있는 것이다.
reference data type의 특징이다.
deep copy를 해야한다. 완전히 다른 별개의 복사본을 만들면 된다!
암기!!!!
const 제목바꾸기 = () => { let newArray = [...글제목]; newArray[0] = '구두 추천'; 글제목변경(newArray); }
deep copy는 서로 값 공유가 일어나지 않고, 완전히 새로운 복사본을 만들어준다.
... spread operator는 중괄호, 대괄호 다 제거해준다. 그 다음 다시 [] 로 담으면 완전히 별개의 Array가 된다.
리액트 대원칙!!!! immutable data! 직접 변경하면 안된다~! 권장한다.
총정리
1. Array, Object state 데이터 수정 방법 : 일단 변경함수 써야한다.
2. 변경함수에 원래 들어간 데이터 자료혀오가 똑같이 변경함수(대체할 데이터) 넣어준다.
3. state는 직접 건들면 안된다. deep copy해서 수정해야 한다.
'🍓𝗪𝗲𝗯 > 𝖱𝖾𝖺𝖼𝗍' 카테고리의 다른 글
[React] 클릭시 UI 보였다가 안보였다가 하기 (0) 2021.09.13 [React] Component 만들기 (0) 2021.09.13 [React] useState로 데이터바인딩하기 (0) 2021.09.12 [React] JSX로 HTML 코딩하기 (0) 2021.09.02 [React] create-react-app으로 리액트 프로젝트 생성하기 (0) 2021.09.02