터미널/브라우저 콘솔창에 노란색 warning 왜 뜰까?
eslint가 잘못된 코딩관습 교정해주는 것이다.(예: "a"라는 변수 만들어놓고 안썼다)
경고문구 안보고 싶다면 파일 최상단에
/*eslint-disable*/ 적어주면 된다.
state 변경하는 방법
기존에 HTML요소를 클릭했을 때 자바스크립트를 실행하고 싶으면
<div onclick="실행할 자바스크립트">이런 식으로 작성했다.
리액트 JSX는 문법이 다르다.
<div onClick={실행할 함수}>- 함수를 변수 다루듯 똑같이 중괄호 { } 로 감싸준다.
- Click도 대문자
예)
<div onClick={ abc }> (abc는 미리 만들어둔 함수 이름)
<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>
// 마지막줄 코드는 화살표함수를 사용한 것.이모티콘 누르면 숫자가 증가하도록 만들기
- state 만든다.
let [ 스마일, 스마일추가 ] = useState(0); '스마일추가' 라는 변수가 바로 '스마일' 이라는 변수를 변경하기 위한 함수다.
이전에 말했던 변수 [a, b] 중 b 에 해당하는 것. (아예 대체할 데이터)
function App(){
let [ 따봉, 따봉변경 ] = useState(0);
return (
<HTML 많은 곳>
<h3> { 글제목[0] } <span onClick={ ()=>{ 스마일추가(스마일 + 1) } } >😁</span> { 스마일 } </h3>
</HTML 많은 곳>
)
}스마일을 1 변경하기 위해서
스마일추가 (기존에 있던 스마일 데이터에 1을 더해주세요)
신기하다. 그냥 onClick = { } 중괄호 안에 바로 함수를 사용해주니 바로 작동을 하네.
안녕하세여