터미널 / 브라우저 콘솔창에 warning이 뜨는 이유
간혹 코드짜다보면 터미널 + 브라우저 콘솔창에 노란색 warning 메세지가 등장하는 경우가 있습니다.
그건 eslint가 잘못된 코딩관습 교정해주는건데
이걸 안보고 싶으시면 파일 최상단에
/eslint-disable/
이라는 주석을 추가해주시면 됩니다.
Q. 따봉갯수 데이터를 state로 만든 후 HTML에 꽂아넣어보기
function App(){ let [ 따봉, 따봉변경 ] = useState(0); return ( <HTML 많은 곳> <h3> { 글제목[0] } <span>👍</span> { 따봉 }</h3> </HTML 많은 곳> ) }
state 만들일이 있으면 useState(넣을데이터) 이렇게 이용.
그 state 명을 원하는 곳에 적어넣으면 됨.
적어넣을 땐 { state명 }
버튼 기능 추가
<div onClick={실행할 함수}> 1. <div onClick={ showModal }> (showModal은 어디 다른데 만들어둔 함수 이름) 2. <div onClick={ function(){ 실행할 코드 } }> 3. <div onClick={ () => { 실행할 코드 } }>실행할 함수에는 위처럼 3개정도 들어갈수있다.
Q. 따봉 버튼 눌렀을 때 숫자 1씩 증가
function App(){ let [ 따봉, 따봉변경 ] = useState(0); return ( <HTML 많은 곳> <h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h3> </HTML 많은 곳> ) }
따봉변경(대체할 데이터)
return 바깥에다가 state변경 함수 쓰면 재렌더링 무한히 일어남. 이유는??
state변경함수로 변경해야 재렌더링이 잘 일어난다.
결론)
- 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용
- state를 변경하려면 state 변경함수를 꼭 이용
Front-Dev