Hook이란?

함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수이다.

React는 useState와 같은 내장 hook을 몇 가지 제공하며, 필요에 따라 컴포넌트 간 state 관련 로직을 재사용하기 위해 hook을 직접 만들 수도 있다.

state using hook

함수형 컴포넌트에서 useState 훅을 사용하여 state를 선언,초기화,사용하는 경우의 개념이다.

useState Import

import React, {useState} from 'react';

useState를 사용한 state 선언/초기화/설정

let [state, setState] = useState(state 초기값);

• 풀이 : let [state값이 들어갈 state명, state를 변경할때 사용할 함수명] = useState(state에 처음 설정될 초기 값);

이벤트에 반응해 : EX) onClick

  // useState에서 설정한 setState() 함수의 내부에서 state에 새로 저장될 값을 설정할 수 있다.
  //es6의 화살표 + 익명 함수가 응용됨
<button onClick ={() => { setState(state+1) }}> 
   {` `}count example
</button>

"count example"이라고 표기된 버튼에서 onClick 이벤트(사용자가 클릭)가 발생할 시 setState()가 state의 값을 바꾸도록 설정.

실습

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import {useState} from 'react';

import './styles.css';



function Recommend() {
  let [글제목, 글제목변경] = useState('남자 바지 추천');

  return (
    <div className="Recommend">
      <div className="black__nav">horiz.d's Blog</div>
      <div className="list" >
        <button onClick = {()=> { // 익명 & 화살표 함수
          if (글제목 === "남자 바지 추천") { console.log('하이'); 글제목변경('여자 바지 추천')}
          else if (글제목 === "여자 바지 추천") {글제목변경('남자 바지 추천');
        }
        }} > {' '}성별 변경하기
        </button>
        <h3>{글제목}</h3>
      </div>
    </div>
  )
}

function Like() { // Like 함수형 컴포넌트
  let [좋아요,좋아요추가] = useState(0); //state 좋아요의 초기값을 0으로 할당 및 state변경함수 할당 using useState hook
  
  return (
    <div className="Like">
      <div className="title">좋아요 기능</div>
      <div className="list">
        <button onClick ={() => {
          좋아요추가(좋아요+1)
        }}> {` `}좋아요 추가하기
        </button>
        <h3>{좋아요}</h3>
      </div>
    </div>
  )
}



ReactDOM.render(
  <StrictMode>
    <Recommend />,
    <Like />,
  </StrictMode>,
  document.getElementById('root')
)

ref : https://velog.io/@mm0467/State-%EC%98%88%EC%A0%9C%EB%A5%BC-%ED%86%B5%ED%95%B4-%EC%97%B0%EC%8A%B5%ED%95%98%EA%B8%B0