React state onClick이벤트로 state변경[warning메시지 제거]

일단 블로그 글 레이아웃을 만들어봅시다

function App(){
 
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

 

(App.css)

div {
  box-sizing : border-box
}
.list {
  text-align : left;
  padding-left : 20px;
  border-bottom : 1px solid grey;
}

 

 

state 만드는 법 

 

이때까진 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데

리액트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다. 

이번엔 state를 이용해 데이터를 잠깐 저장해보도록 합시다.

import { useState } from 'react';
import './App.css'

function App(){
 
  let [a,b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

맨 윗줄에 import {useState} from 'react' 하고 (useState 자동완성시 import자동생성된다)

원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다.

그리고 저장한 자료를 나중에 쓰고 싶으면

let [a,b] = useState('남자 코트 추천');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다. 

 

Spoiler란?

자바스크립트 destructuring 문법인데 

내가 array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법입니다.

 

예를 들어서 ['Kim', 20] 이렇게 생긴 array 자료를 만들어놨는데

에서 Kim이랑 20이라는 자료를 각각 변수에 저장하고 싶으면

let array = ['Kim', 20];

let name = array[0];
let age = array[1];

대충 이렇게 해도 되는데 

let [name, age] = ['Kim', 20]

요즘 사람은 이렇게 합니다.

그럼 각각 name = 'Kim',  age = 20 이라는 변수가 생성됩니다.

귀찮게 등호여러번 쓸 필요 없이 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으로 알아서 변수가 생성됩니다.

이게 변수만들 때 쓰는 destructuring 문법입니다.

익숙하지 않아도 리액트 사용을 위해 일단 외우는게 중요합니다.

 

그래서 리액트로 다시 돌아가서

useState()를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 생긴 이상한 array가 남습니다.

데이터1 자리엔 '남자 코트 추천'같은 자료가 들어있고 

데이터2 자리엔 state변경을 도와주는 함수가 들어있습니다. 

 

그 데이터들을 각각 변수로 빼고 싶으면 

let [a, b] = useState('남자 코트 추천')

이러면 되는 것일 뿐입니다. 

 

변수명을 약간 더 직관적으로 작명하면

let [글제목, b] = useState('남자 코트 추천');

이렇게 하면 조금 더 직관적으로 이해할 수 있겠군요.

글제목이라는 변수에는 '남자 코트 추천'이라는 자료가 들어간댔으니

한번 html에 중괄호로 {글제목} 넣어보십시오. 진짜 나오지 않습니까 

 

function App(){
 
  let [글제목, b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

이렇게 짜고 저장해보면 진짜 글제목 부분에 '남자 코트 추천'이 나오는군요.

그래서 결론은 리액트에선 일반 변수대신 state 이용해도 자료를 잠깐 저장해둘 수 있다는겁니다.

맘대로 쓰도록 합시다. 

 

변수 말고 state에 데이터 저장해서 쓰는 이유

새로운 문법을 배웠으면 이걸 어디에 쓸 지 생각해봐야합니다.

그걸 알아야 나중에 혼자서 코드짤 때도 자신있게 state를 가져다 쓰는 것임 

 

잘 생각해보면 state도 용도는 그냥 변수랑 똑같습니다. 자료 잠깐 보관하는게 끝인데 

그럼 변수 만들어 쓰면 되는거지 왜 굳이 state 만들어쓰냐고요?

state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다

function App(){
  let post = '강남 우동 맛집'

  return (
    <h4>{ post }</h4>
  )
}

▲ let post 변수에 있던걸 {post} 이렇게 데이터바인딩 해놨다고 가정해봅시다. 

근데 갑자기 post 변수에 있던걸 '강남 우동 맛집'  ->  '강남 고기 맛집' 이렇게 바꿨습니다. 

그 변경사항도 html에 반영되게 하고 싶으면 어떻게하죠?

직접 여러분이 "변수내용 바뀌었으니까 html도 고쳐주세요" 라고 귀찮게 코드짜면 됩니다. 

쌩자바스크립트는 원래 그래야함 

 

function App(){
  let [글제목, b] = useState('남자 코트 추천');

  return (
    <h4>{ 글제목 }</h4>
  )
}

▲ 이번엔 state를 하나 만들어서 {글제목} 이렇게 데이터바인딩 해놨다고 가정해봅시다. 

근데 갑자기 state에 있던걸 '남자 코트 추천'  -> '여자 코트 추천' 이렇게 바꿨습니다. 

그 변경사항도 html에 반영되게 하고 싶으면 어떻게 하냐고요? 

state자료는 그럴 필요 없습니다. 여러분이 개입 안해도 자동으로 html도 바뀝니다.  

state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해줘서 그렇습니다. 

 

그럼 뭐가 좋겠습니까

- 그리고 UI 기능 개발도 매우 편리해지고

- 사이트처럼 스무스하게 동작하는 것임 

 

Q. 그럼 블로그 로고 같은 그런 데이터도 state로 만들어두고 {데이터바인딩} 할까요?

그러셔도 됩니다. 하지만 블로그 로고명은 거의 바뀌지 않죠?

바뀌지 않는 데이터들은 state로 굳이 저장할 필요 없습니다.

state의 가장 큰 장점은 state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것인데

로고명은 아예 바뀔 일이 없으니 의미가 없겠죠.

state는 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는게 좋은 관습입니다.

 

요약

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓으십시오

1. 변경할 일이 없는 데이터들

2. 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 됩니다. 

 

---

버튼에 기능개발을 해보도록 합시다.

버튼을 눌렀을 때 자바스크립트를 실행시키고 싶으면 어떻게 해야하는지,

그리고 state를 수정하려면 어떻게 해야하는지 알아봅시다.

 

터미널 / 브라우저 콘솔창에 warning이 뜨는 이유

개발하다보면 에러메세지는 터미널이나 브라우저 개발자도구에 뜬다고 했는데

간혹 노란색 warning 메세지가 등장하는 경우가 있습니다. 

빨간 error는 해결해야하지만 warning은 개무시해도 됩니다. 

 

대부분 eslint라는 친구가 잘못된 코딩관습 교정해주는건데 

"변수만들었는데 안쓰고 있네요 지우는게 어떰"

이런 식의 잔소리를 warning 으로 띄워줍니다.

 

초보때는 이런거 지키는거 보다 코드짜보고 실행하는게 중요해서 

/*eslint-disable*/

이라는 주석을 js 파일 최상단에 추가해주면 eslint 기능을 잠시 끌 수 있습니다. 

 

좋아요 버튼 만들기 

버튼을 누르면 좋아요 갯수가 1씩 증가하는 기능을 만들어봅시다.

좋아요 같은경우는 자주 변동되는 값이니 state를 이용하여 만들어야 합니다.

function App(){
  
  let [따봉] = useState(0);
  return (
     <h4> { 글제목[0] } <span>👍</span> { 따봉 }</h4>
  )
}

 

onClick 사용법

html과 jsx의 onclick의 차이를 보자

<div onclick="실행할 자바스크립트~~~">

일반 html 파일에선 이렇게 하면 됩니다.

 

<div onClick={실행할함수}>

JSX에서는 이렇게 합니다. 

 

1. Click이 대문자인거

2. {} 중괄호 사용하는거

3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거를 기억해주십시오. 

 

onClick={ } 안에 함수를 적는게 뭔소리냐면

onClick={} 안에는 어디서 만든 함수명을 적거나 아니면 함수 하나를 바로 만들어서 집어넣어주시면 됩니다. 

함수가 뭐냐고요? 

함수는 그냥 긴 코드를 짧은 단어 하나로 축약해주는 문법입니다. 

function 작명(){ 긴코드 } 이렇게 하면 함수하나 만들 수 있습니다. 

function App(){
  
  function 함수임(){
    console.log(1)
  }
  return (
     <div onClick={함수임}> 안녕하세요 </div>
  )
}

그래서 이러면 <div>를 클릭시 함수안에 있던 자바스크립트가 실행됩니다.

이게 리액트에서 어떤 html 요소 클릭시 원하는 코드실행하는 법입니다.

근데 함수 만드는게 귀찮으면 

 

<div onClick={ function(){ 실행할코드 } }> 
<div onClick={ () => { 실행할코드 } }>

이렇게 함수를 그 자리에서 직접 만들어버려도 가능합니다.

Q. 함수만들 때 작명안해도 되나요?

A. 나중에 다시 안쓸거면 작명안해도 됩니다. 

참고로 () => {} 이 코드도 function (){} 이것이랑 거의 똑같은 기능을 하는 함수만들기 문법입니다. 

 

(매우중요) state 변경하는 법

아무튼 좋아요 버튼 누르면 따봉이라는 state를 +1 해주고 싶으면 코드 어떻게 짜죠? 

그냥 여러분 잘하는 간단한 자바스크립트 문법 쓰면 됩니다. 

function App(){
  
  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉 = 따봉 + 1 } } >👍</span> { 따봉 }</h4>
  )
}

변수에 +1 해주고 싶으면 변수 = 변수+1 해주면 끝입니다.

근데 안타깝게도 저건 변수가 아니라 state입니다. 

state는 state변경함수를 써서 state를 변경해야합니다. 

안그러면 큰일남 (html 재렌더링 안됨) 

 

let [ 따봉, 따봉변경 ] = useState(0); 

state만들 때 2개까지 작명할 수 있댔는데

두번째 작명한건 state 변경을 도와주는 함수입니다. 

그거 써야 state 변경이 가능합니다. 

 

사용법은

따봉변경(새로운state) 

이렇게 쓰면 됩니다. 

왜냐면 state 변경함수는 ( ) 안에 넣은걸로 state를 갈아치워주는 함수라 그렇습니다.

 

따봉변경(1) 이라고 사용하면 따봉이라는 state가 1로 변경됩니다.

따봉변경(100) 이라고 사용하면 따봉이라는 state가 100으로 변경됩니다.

글자라면 따봉변경('따봉좋아') 하면 0이 따봉좋아로 바뀌게 된다.

 

좋아요를 눌렀을 때 따봉이라는 state를 1 증가하려면 

function App(){
  
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
  )
}

따봉이라는 기존 state에 1을 더한 값을 따봉변경 함수에 집어넣었습니다.

그럼 버튼을 누를 때 마다 그 값으로 대체됩니다.

진짜 누르니까 1씩 증가하네요 

 

요약

 

1. 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용합니다.

2. state를 변경하시려면 state 변경함수를 꼭 이용하십시오.

state변경함수는 ( ) 안에 입력한걸로 기존 state를 갈아치워줍니다.

중요하니 외워둬야합니다.