리액트

[리액트] 버튼에 기능개발을 해보자 & 리액트 state변경하는 법

front-hyun 2023. 8. 29. 10:15
 

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

 

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

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

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

 

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

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

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

 

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

/*eslint-disable*/

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

 

 

 

 

 

 

좋아요 버튼 만들기 

 

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

그래서 일단 html 레이아웃이 필요할 것 같아서 이렇게 만들면 될듯요 

 

<h4> { 글제목[0] } <span>👍</span> 0 </h4>

미리보기 띄워보면 좋아요 버튼과 갯수가 잘 나오는군요. 

 

 

여기서 이제 좋아요 갯수에 좀 주목을 해보도록 합시다.

지금은 0이라고 하드코딩 해놨는데, 이러면 안될 것 같습니다. 

저번시간에 

"자주 바뀔 것 같은 html 내용은 state로 저장했다가 데이터바인딩하세요"

라고 배웠던 기억이 나기 때문에 그렇게 해보도록 합시다. 

좋아요 갯수를 state로 만들어보십시오. 

 

 

onClick 사용법

 

이제 버튼을 누르면 따봉이라는 state를 1 증가시키면 원하던 기능완성인데 

그 전에 알아야할게 하나 있습니다.

어떤 html을 클릭시 원하는 코드 실행하는 법을 알아봅시다.

 

 

<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으로 변경됩니다.

알겠죠? 따봉변경( 따봉 = 따봉 + 1 ) 이딴거 안됩니다. 깔끔하게 새로운 state만 집어넣으시면 됩니다. 

 

 

 

 

 

 

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

 <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉+1)} } >👍</span> { 따봉 }</h4>

 

 

 

오늘 배운 내용 정리하면 

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

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

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

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

 

 

 

오늘의 숙제 :

버튼을 누르면 첫 글 제목이 '여자 코트 추천'으로 바뀌는 기능의 버튼을 만들어봅시다.

일단 글수정 버튼 만들기 

 

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
      <button onClick={ ()=>{ ??? } }> 수정버튼 </button>
  )
}

대충 아무데나 버튼하나 만들고 이거 누르면 첫 글이 수정되는 기능을 만들어봅시다.

저기 물음표안에 뭘 넣어야하죠? 

 

 

 

 

 

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학'])
    } }> 수정버튼 </button>
  )
}

이러면 숙제 끝입니다. 버튼누르면 첫 글제목 바뀜 

state 변경함수는 ( ) 안에 넣은걸로 기존 state를 갈아치워주니까 저렇게 집어넣으면 됩니다.

 

 

Q. 글제목변경('여자코트 추천') 이건 왜 안됩니까

A. 기존 state를 갈아치워준다니께요 

['남자코트 추천', 강남 우동맛집', '파이썬 독학'] 이걸

['여자코트 추천', 강남 우동맛집', '파이썬 독학'] 이걸로 바꾸고 싶으면 

['여자코트 추천', 강남 우동맛집', '파이썬 독학'] 이걸 state변경함수에 넣어야지 글 하나만 넣으면 되겠습니까 

 

 

 

 

 

 

 

약간 프로그래머 스타일로 다시만들어보면

 

지금 코드는 확장성이 부족합니다. 

[ ] 안에 글이 3개밖에 없어서 망정이지 글이 100개 들어있으면 어쩔 것임 

onClick 안의 코드도 매우 길어지겠군요.

그러니까 기존 state를 다 복붙하지말고

기존 state를 첫 글만 살짝 바꿔서 state변경함수에 집어넣는 식으로 개발해봅시다.

 

 

 

 

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      글제목[0] = '여자코트 추천';
      글제목변경(글제목)
    } }> 수정버튼 </button>
  )
}

이래도 됩니다.

array 자료안의 X번째 항목을 변경하고 싶으면

array자료[X] = '바꿀값' 이렇게 하면 됩니다. 

그래서 자료를 바꾸고 저기 state변경함수에 집어넣은 겁니다. 

근데 이런거보다 더 나은 방법이 하나 있는데 

 

 

 

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = 글제목;
      copy[0] = '여자코트 추천';
      글제목변경(copy)
    } }> 수정버튼 </button>
  )
}

array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는

기존값은 보존해주는 식으로 코드짜는게 좋은관습입니다. 

(왜냐면 원본 막 바꿔버렸을 때 갑자기 원본이 필요해지면 어쩔 것임)

그래서 let copy 같은 변수에다가 기존 array를 복사해놓고 

그걸 조작하는 식으로 코드짜면 조금 더 안전합니다. 

 

근데 사기인듯 수정버튼 눌러도 안바뀌는데요

 

 

 

 

 

 

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...글제목]; //그냥 =글제목이라고 하면 안 됨. 점 3개와 괄호 필요
      copy[0] = '여자코트 추천';
      글제목변경(copy)
    } }> 수정버튼 </button>
  )
}

이러면 제대로 동작합니다.

근데 동작원리가 궁금하지않습니까

동작원리같은거 많이 알고 있으면 나중에 혼자 코드짤 때 많은 응용이 가능합니다.

 

다음 글에서 .. !!