[코딩애플] 기초 4강 정리 및 숙제, 좋아요 버튼 생성하기

기초 4강 정리

 

1. 이벤트 리스너 사용하는 방법

1) 원하는 버튼에 onClick = { 클릭시 실행할 함수 } 작성

 a. 이때, 직접 함수를 작성하거나 ex. 함수명()

 b. 콜백 함수를 작성할 수 있음. ex. ()=> { 실행할 내용 }  - 이걸 많이 사용하는 듯.

 c. 실제 작성 코드

<div className="list">
	<h3>{ 글제목[0] } <span onClick={ ()=> {} } >👍</span> 0 </h3> 
	<p>2월 17일 발행</p><hr/>
</div>

cf. 직접 함수 작성할 때, 바로 실행하려면 함수명()

   버튼 누르면 실행 등과 같이 어떤 동작 다음에 실행이면 ()없애야 함.

 

 

2. state 와 결합하여 사용

1) 좋아요 이모티콘을 누를 때마다 추천 수가 증가하게 만들고자 함. ▶ 자주 바뀌는, 중요한 변수

2) import 문 수정 ▶ let [ a, b ] = useState(); 초기값을 0으로 설정

function App() {
  let [좋아요, 좋아요변경] = useState(0);

 

▶ 버튼에 state 데이터 변수 작성

return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] } <span onClick={ ()=> {} } >👍</span> { 좋아요 } </h3> 
        <p>2월 17일 발행</p>
        <hr/>
      </div>

 

여기까지 하고, onClick 함수를 작성한다면? 좋아요 + 1

이라고 생각하기 쉬움. 그러나 그냥 바로 state 변수 사용하면 작동되지 않는다.

앞서 배웠던 것을 떠올려보자.

 

let [ a, b ] = useState(); a는 찐 데이터, b는 데이터를 수정할 함수.

 

이때, b를 사용하는 것이다.

 

▶ state 데이터 수정할 함수 작성 : '좋아요 변경' 활용. 함수명(작동 내용_변수 + 1)

function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '광교 횟집 추천']);
  let [좋아요, 좋아요변경] = useState(0);
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] } <span onClick={ ()=> { 좋아요변경(좋아요 + 1)} } >👍</span> { 좋아요 } </h3> 
        <p>2월 17일 발행</p>
        <hr/>
      </div>

 

3) 실행 화면

 

 

기초 4강 숙제(버튼 누르면 첫째 글 제목 변경)

 

1. 실행 화면

 

2. 작성 코드

- state 직접 수정이 안되어 살짝 헤맸다. (직접 수정? 글제목[0] = 글제목[3] 과 같이 바로 작성하는 것.)

▶ tip. state 변경 함수는 "아예" 대체하는 함수이므로, 데이터 고대로 가져와 수정하면 됨. - 필자가 선택한 방식

 

  혹은 수정된 [데이터]를 만들면 됨. 복사본 생성! - 답안

  - 사실 '복사본' 생각하고 코드를 짰는데 제대로 작동 안됨. 알고보니 <값 공유>, 복사가 안된거였음.ㅜ

   (답안) deep copy 해야 함.

/*eslint-disable*/
import React, { useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '광교 횟집 추천']);
  let [좋아요, 좋아요변경] = useState(0);
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={ ()=>{글제목변경(['여자 코트 추천', '강남 우동 맛집', '광교 횟집 추천'])}}>버튼</button>
      <div className="list">
        <h3>{ 글제목[0] } <span onClick={ ()=> { 좋아요변경(좋아요 + 1)} } >👍</span> { 좋아요 } </h3> 
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3> 
        <p>2월 18일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[2] }</h3> 
        <p>2월 19일 발행</p>
        <hr/>
      </div>
      
    </div>
  );
}

export default App;

 

 

3. 답안

1) deep copy!

 a. 개념 : 서로 독립적인 값을 가지는 복사 

 b. 수정된 [데이터]를 만드는데, deep copy해서 생성한다.

 c. <값 공유> 와의 차이?

function 제목바꾸기() {
    var newArray = 글제목;
    newArray[0] = '여자 코트 추천';
    글제목변경(newArray);
}

(위) 값 공유 / (아래) deep copy

function 제목바꾸기() {
    var newArray = [...글제목];
    newArray[0] = '여자 코트 추천';
    글제목변경(newArray);
}

cf. [...블라블라] : ...은 Es6 신 문법. 중괄호, 대괄호 모두 없애고 다시 담는다는 의미.

- 값 공유는 원본 자료 못 바꿈. 깊은 복사해야 바꿀 수 있음. 그 형식이 리액트에서는 [...~]

  [...~] 은 state 데이터 수정 테크닉. **리액트 대 원칙 : immutable data - 직접 수정 불가! 

 

2) 코드

/*eslint-disable*/
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '광교 횟집 추천']);
  let [좋아요, 좋아요변경] = useState(0);
  
  function 제목바꾸기() {
    var newArray = [...글제목];
    newArray[0] = '여자 코트 추천';
    글제목변경( newArray );
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={ 제목바꾸기}>버튼</button>
      <div className="list">
        <h3>{ 글제목[0] } <span onClick={ ()=> { 좋아요변경(좋아요 + 1)} } >👍</span> { 좋아요 } </h3> 
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3> 
        <p>2월 18일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[2] }</h3> 
        <p>2월 19일 발행</p>
        <hr/>
      </div>
      
    </div>
  );
}

export default App;