[리액트 블로그 만들기] useState와 onClick

🍎 코딩애플 리액트 기초 강의를 통해 블로그 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다.

useState

• 데이터는 하드 코딩하지 않고 변수에 넣거나, state를 이용해서 저장해야 한다.

1️⃣ 변수 저장보다 state 를 쓰는 이유

• 웹이 app 처럼 부드럽게 동작하게 만들고 싶어서(값이 변경이 될 때 html이 자동으로 재렌더링(새로고침 x)

• 변수로 데이터를 저장하면 변수가 바뀌어도 자동 재렌더링이 되지 않고 새로고침해야한다.

  ➔ ⭐️ 자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해서 써야함

2️⃣ 쓰는 방법

• Let [현재값, 변경함수] = useState(초기값)
  
  
  • 변경함수를 통해 현재값을 바꿔야 재렌더링으로 제대로 변경됨
    
    
  • 기존 state에서 값을 가져와 바꾸고 싶을 때는 바로 state를 건드는 것이 아니라, 복사본을 하나 만들어서 그걸 state 변경함수에서 바꿔주기
    (💡 spread operator 쓰기!)

  1. 기존 state 복사본 만들기
  2. 복사본에 수정사항 반영하기
  3. State 변경함수에 집어넣기

---

3️⃣ 구현하기

(1) 버튼 클릭 시 제목 문자열 일부를 변경하기 (‘에어’ -> ‘프로’)

• useState 구문

let [title,titleCng] = useState(['서울 근교 여행지 추천','맥북 m1 에어 구매후기','힐링하기 좋은 서울 전시회 추천']) 

• onClick fnc (titleFnc)

const titleFnc = () => {
    const newTitle = [...title]
	// 1. 기존 state 복사본 만들기
	// Deep copy
	//spread operator 값 공유 x, 서로 독립적인 값을 가지는 복사
    
    newTitle[1] = '맥북 m1 프로 구매후기'
  	//2. 복사본에 수정사항 반영
  
    titleCng(newTitle)
  	//3. state 변경함수에 집어넣기
  }

• JSX

<div className='list'>
          <h3>{ title[1] }</h3>
          <p>{ date }</p>
          <button onClick={ titleFnc }> 제목 변경</button>
          <hr/>
</div>

⭐️ spread operator를 사용한 Deep copy
const newTitle = title // 복사가 아니라 값 공유
const newTitle = […title] // 값 공유가 아닌 새로운 배열로 복사

---

(2) 버튼 클릭시 발행일 변경하기

• 버튼 클릭시 ‘1월 26일 발행’의 인덱스 0번인 ‘1’ -> ‘2’ , 또 그 반대로 바꾸기

• useState 구문

let [date, dateCng] = useState('1월 26일 발행')

• onClick fnc (dateFnc)

  const dateFnc = () => {
    //인덱스 0번의 값을 바꿔주기
    const newDate = [...date]
    // 1. 기존 state 복사본 만들기
      if(newDate[0]= '1'){
        newDate[0] = '2'
       //2. 복사본에 수정사항 반영
        dateCng(newDate)
       //3. state 변경함수에 집어넣기 
      }else{
        newDate[0]= '1'
        dateCng(newDate)
      }
}

• JSX

<button onClick={ dateFnc }>발행일 변경</button>

---

(3) <나의 응용> 버튼 클릭시 발행일 오늘 날짜로 변경하기

• useState 구문

let [date, dateCng] = useState('1월 26일 발행')

• onClick fnc (dateFnc)

const dateFnc = () => {
    const today = new Date();
    const todayM = today.getMonth() + 1;
  //getMonth() 메서드는 0부터 11까지를 반환하므로 +1
    const todayD = today.getDate();
    dateCng(`${todayM}월 ${todayD}일 발행`)
  }

• JSX

<button onClick={ dateFnc }>발행일 오늘 날짜로 변경</button>

• 🧚‍♂️ 작동
  

---

(4) 버튼 클릭시 모달 열고 닫기

• Modal 컴포넌트 분리하여 Import
  

<내가 짠 코드>

state 초기값은 false로 주었다.
온클릭 함수( modalOpen )에서 삼항연산자로 modal이 true이면 변경함수로 false로 바꿔주고, 아니라면(modal 이 false이면) true 로 바꿔주는 식으로 작성

• useState

let [modal,modalCng] = useState(false)

• onClick fnc

  const modalOpen = () => {
    modal === true
    ? modalCng(false)
    : modalCng(true)
  }

• JSX (삼항연산자 사용)

<h3 onClick={ modalOpen }>{ title[2] }</h3>
{
modal === true
? <Modal />
: null // 빈 html
}

<개선>

💡 따로 온클릭 함수 만들 필요도 없이, modal 변경함수 (modalCng)에 modal 값과 반대 (!modal) 값을 넣어준다. 쏘 심플!

• 🧚‍♂️ 작동
  

---

(5) <나의 응용> Nav 바에서 메뉴 클릭시 이모지 선택하기 (ing)

네비바에 what's up? 메뉴를 만들고,클릭시 감정 상태를 표현할 수 있는 이모지들이 나오도록 만들었다.
선택한 이모지가 what's up? 옆에 출력될 수 있도록 구현해보려 한다.

컴포넌트를 분리하면서 css 파일을 만드는대신 최근에 배운 styled-component를 사용해보았다. 🤓

• Emojis.js

import React from 'react'
import styledComponents from 'styled-components'

const EmojiModal = styledComponents.div`
  width: 100px;
  border-radius: 20px;
  background-color: aliceblue;
  margin-top:10px;
  z-index: 1;
  position: absoulte;
`

const Emojis = styledComponents.span`
  padding: 10px;
  cursor: pointer;
  font-size:20px
`

export default function Emoji(){
  return(
    <>
    <EmojiModal>
    <Emojis>😄</Emojis>
    <Emojis>😍</Emojis>
    <Emojis>😢</Emojis>
    <Emojis>😡</Emojis>
    <Emojis>😱</Emojis>
    </EmojiModal>
    </>
  )
}

• Blog.js의 useState문과 Nav 부분

useState의 기본값을 false로 주고,
삼항연산자로 Emoji 컴포넌트를 보여줄 조건을 달았다.

let [feel, feelCng] = useState(false)

      <div className='nav'>
        <p className='navTitle'>DevSeung's Blog</p>
        <p className='navFeeling' onClick={ () => feelCng(!feel) }>What's up?
        {
          feel === true
          ? <Emoji />
          : null // 빈 html
        }
        </p>
      </div>

• 🧚‍♂️ 작동