[ 코딩애플 ] React 리액트 기초 Part2

💁‍♀️ 블로그 글 초기 레이아웃

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 만드는 법

- 맨 윗줄에 import {useState} from 'react'하고 원하는 곳에 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있다.
- 나중에 저장한 자료를 쓰고 싶으면 let[a,b] = useState('남자 코트 추천');

import { useState } from 'react';

function App(){
 
  let [글제목, b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
    	...
	    <h4>{ 글제목 }</h4>
	...
    </div>
  )
}

1) 변수  말고 state에 데이터 저장해서 사용하는 이유
- state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링 해준다.
    → 그래서 바뀌지 않는 데이터들은 state로 굳이 저장할 필요가 없음!
- 여러 개의 useState() 사용하지 않고 array자료로 구현할 수도 있다.
- 이점: UI 기능 개발도 매우 편리, 사이트가 스무스가 동작함

 

✏️ 좋아요 버튼 만들기

// 초기 코드
function App(){

  // 좋아요 갯수 state로 만들기
  let [따봉] = useState(0);
  return (
     <h4> { 글제목[0] } <span>👍</span> { 따봉 }</h4>
  )
}

1) onClick 사용법

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

- Click이 대문자!
- {} 중괄호 사용!
- 그냥 코드가 아니라 함수를 넣어야 잘 동작함!

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

// 또는 함수를 그 자리에서 직접 만듬
<div onClick={ function(){ 실행할코드 } }> 
<div onClick={ () => { 실행할코드 } }>

2) state 변경하는 법
- state 변경함수 사용해서 state 변경
- 사용법: 따봉변경(새로운state)
   → 예: 따봉변경(1) ⟹ state가 1로 변경

// 완성 코드
function App(){
  
  // state 변경함수 사용해서 state 변경
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
  )
}

✏️ 글 수정 버튼 만들기

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

1) state 변경함수 동작원리
- state 변경함수를 쓸 때 기존 state === 신규 state 이렇게 먼저 검사
→ 그래서 같으면 state 변경X

2) array/object 동작원리

-  자바스크립트는 array/object 자료를 하나 만들면 자료가 램이라는 가상공간에 몰래 저장되고 변수에는 그 자료가 어디있는지 가리키는 화살표만 담겨있다.
- 예를 들어서 let arr = [1,2,3] 이렇게 만들면 [1,2,3] 자료는 램이라는 가상공간에 몰래 저장이 되고 let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있음!

- 그래서 array/object 자료를 복사하면 새로운 변수가 자료값을 별개로 저장하는 것이 아니라 똑같은 값을 공유한다.
- 예를 들어 data1, data2를 선언했을 때, data1을 변경하면 data2도 자동으로 변경됨.

따라서 컴퓨터는 copy와 기존 글제목 state는 똑같다고 생각하기 때문에(화살표가 똑같아서) state 변경 안해줌.

//state 변경 안됨
let copy = 글제목;
copy[0] = '여자코트 추천';
글제목변경(copy)

// 💡이렇게 하면 됨!
let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)

"..."

spread operator 라고 하는 문법인데 array나 object 자료형 왼쪽에 붙일 수 있으며 "괄호를 벗겨주세요" 라는 뜻.
→ 예를 들어 ...[1, 2, 3] 이렇게 쓰면 그 자리에 1, 2, 3이 남음.

let data1 = [1,2,3];
let data2 = [...data1];
console.log(data1 === data2) //false 나올듯

그냥 data1에 있던 자료들을 괄호 벗긴 다음 다시 array로 만들어주세요! 라고 사용하면 새로운 array로 인식하기 때문에 화살표가 달라진다. 그래서 그렇게 하면 화살표가 다른 완전 독립적인 array 복사본을 생성해줄 수 있다. (object 자료형도 마찬가지!)

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.