[React] onclick

아래 teminal 창에 warning 없애기 : js 맨 상단에 /* eslint-disable */  작성 or 필요 없는 import 지우기

state 변경 : {}안에서 하면 안됨

/* eslint-disable */

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

function App() {

  // 방법 1 : 각각 변수로 저장 
  let [list1,funcList1] = useState('남자 코트 추천');
  let [list2,funcList2] = useState('강남 우동맛집'); 
  let [list3,funcList3] = useState('파이썬독학'); 
  let [date, funcDate] = useState('2월 17일 발행');

  // 방법 2 : list 로 저장
  let [listArr,funcArr] = useState(['남자 코트 추천','강남 우동맛집','파이썬독학']);
  let [like, plusLike] = useState(0); 
  // 함수를 사용하지 않을 시 변수명만 만들어도 됨
  // state 변경 시 함수 부분 생략하지 않아야 html 재렌더링 잘됨

  function calcLike(){
    console.log(1)
  }

  return (
    
    <div className="App">
      <div className='black-nav'>
        <h4>ReactBLOG</h4>
       </div>
        <div className='list'>
        <h4>{ listArr[0] } <span onClick={() => { plusLike(like+1) }}>👍🏻</span> {like} </h4> 
          {/* state 변경함수( 변경할 내용 입력 )  */}
          {/* <h4>{ listArr[0] } <span onClick={calcLike}>👍🏻</span> {like} </h4>  */}
          {/* onlick 내에는 함수/람다식 만 사용 가능 
            ex) onClick = function(){console.log(1)} , 
                onClick = () => {console.log(1)}
          */}
          <p>{ date }</p>
        </div>
        <div className='list'>
          <h4>{ list2 }</h4>
          <p>{ date }</p>
        </div>
        <div className='list'>
          <h4>{ list3 }</h4>
          <p>{ date }</p>
        </div>
    </div>
  );
}

export default App;

 

연습 : 버튼 click 시 첫 글 제목이 '여자 코트 추천'으로 변경 되는 버튼 만들기

state 변경 함수 특징 

기존 state == 신규 state ---> 변경 안해줌

 

array/object 특징

array/object 담은 변수엔 값이 어디있는지 알려주는 화살표만 저장됨

글제목[0]='여자코트 추천'; 으로 변경시 값은 바뀌지만 화살표는 변경되지 않음 => 같은 state로 인식

copy를 하더라도 값이 아니라 화살표만 copy 되어 같은 state로 인식 => state 변경되어 출력되지 않음

console.log(copy == 글제목) =true로 출력됨

copy 시 let copy = [...글제목]; 으로 복사해야함 (shallow copy 해야함)

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

function App() {
  let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천'])
  let [date, changeDate] = useState('2월 17일 발행')
  let [cnt, plusCnt] = useState(0)

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>ReactBlog</h4>
      </div>
      <div className='list'>
        <h3>{title[0]}<span onClick={()=>{plusCnt(cnt+1)}}> ♥</span> {cnt}</h3>
        <p>{date}</p>
      </div>
      <div className='list'>
        <h3>{title[1]}</h3>
        <p>{date}</p>
      </div>
      <div className='list'>
        <h3>{title[2]}</h3>
        <p>{date}</p>
      </div>
      <button onClick={()=>{
        let copy = [...title]
        copy[0] = '여자코트 추천'
        changeTitle(copy)
      }}>변경</button>
      <button onClick={()=>{
        let copy = [...title]
        copy.sort()
        changeTitle(copy)
      }}>가나다순 정렬</button>
    </div>
  );
}

export default App;

.black-nav{
  display: flex;
  background-color: black;
  color: white;
  padding-left: 20px;
  text-align: left;
  width: 100%;
}
.list{
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}