React 클릭 시 이미지 변경 - React keullig si imiji byeongyeong

Question

0:00 저번시간 숙제 & 터미널에 뜨는 eslint warning 설명

2:30 좋아요 버튼만들기

4:52 onClick 쓰는 법

7:51 state 변경하려면 그냥하면 안되고

오늘의 숙제 :

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

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

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

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

저번시간 숙제는

function App(){
 
  let [글제목, b] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목[0] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ 글제목[1] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ 글제목[2] }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

useState() 3번 써도 state 3개 만들 수 있는데

그게 귀찮으면 array자료를 이용하면 됩니다.

한 곳에 여러개의 문자를 집어넣고 싶으면 [ ] 대괄호안에다가 문자들 끼워넣고 콤마로 구분해주면 됩니다.

그걸 array자료라고 부릅니다.

그래서 {글제목} 이렇게 쓰면 ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] 이거 남음

array자료에서 원하는거 하나만 뽑고 싶으면

array이름[0] 이러면 왼쪽에서 부터 0번째 자료가 나옵니다

array이름[1] 이러면 왼쪽에서 부터 1번째 자료가 나옵니다

진짜임 확인해보셈

[collapse]

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

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

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

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

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

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

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

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

/*eslint-disable*/

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

좋아요 버튼 만들기

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

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

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

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

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

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

저번시간에

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

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

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

state 만들어보셨습니까

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

그냥 useState() 쓰고 왼쪽에 작명만 잘하면 state 만들기 끝입니다.

useState() 왼쪽에 작명은 2개 해야하지만 귀찮으면 저처럼 1개만 해도 됩니다.

[collapse]

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 증가하려면

지금까지의 정보를 바탕으로 빨리 혼자 짜보십시오.

저는 이렇게 했는데

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

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

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

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

[collapse]

오늘 배운 내용 정리하면

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

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

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

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

숙제도 해오십시오

리액트 이벤트 핸들링