본문 바로가기

useState2

[React]이벤트 다루기,onClick 값 변경 onClick 이벤트 값 설정 리액트에서 onClick을 적용하려면!! (클릭하면 실행될 내용 설정) onClick = {클릭될때 실행할 함수} onClick = { () => {실행할 내용}} /*괄호안에 표현식을 바로 사용할 수 없기 때문에 콜백함수 혹은 Arrow function를 만들어 사용*/ 클릭시마다 1 증가시키기 이때 역시 useState를 사용하는데 데이터가 아닌 대체할 데이터!! 를 사용해야한다. 위와 같은이유로 useState 함수에 기본값이 [데이터, 데이터변경 값]으로 구성되어있음 값 변경시 꼭!!!!! 변경 값을 사용하자!!! 또한 state 변경함수로 변경해야 재렌더링이 잘 일어남 수정된 [데이터]를 만든다 -> newArray 기존 state 값을 복사 -> 나쁜예 (값 공유.. 2023. 1. 12.
[React]태그에class 적용, 변수 대신 useState 태그에 class를 적용하고 싶으면 취업 대작전 class 는이미 javascript에 이미 존재하는 예약어이기 때문에 className을 사용한다. 데이터 바인딩 쉽게하는 법 (데이터를 HTML에 연결) {변수명, 함수 등}사용 {posts} {function()} src, id, href 등의 속성에도 사용 가능 데이터바인딩하는 다른 방법!! s t a t e (리액트 문법임) import React, {useState} from 'react'; 위와 같이 데이터는 1.변수에 넣거나 2.state에 넣으면 된다. 리액트의 내장함수를 사용. const [count, setCount] = useState(0); let [글제목, 글제목변경] = useState('뒤집어지게 맛있는 고깃집 추천'); 이런식.. 2023. 1. 12.