React-Hooks 사용하기(5)

1.Hook의 개요
https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

Hooks?!

useState, useEffect, useMemo, useCallback, useReducer, etc...

 

useState

1) state 만들기

import {useState} from "react" //react 기본 내장 함수
//import React from "react";

//함수형 변수선언
const [isChecked, setIsChecked] = useState(false);

//다른 방식
const [isChecked,setIsChecked] = React.useState(false);

const onClick=()=>{
	setIsChecked(!isChecked);  //true  
}

 

useEffect

import {useState, useEffect} from "react";

function App(){
	const [data, setData] =useState(false);
    
    useEffect(()=>{
    	if(data){
        	console.log("Data changed!") //data가 바뀔때마다, 이를 감지해 콘솔 출력
            }},[data]);
            
            return(
            		<div>
                    	<button value="적용" onClick={setData(!data)}></button>
                    </div>
                )}
                
export default App;

etc

useMemo : 과거에 계산한 값을 반복해서 사용할때, 그 값을 캐시에 저장

useCallback : useMemo의 함수 버전, 반복적으로 사용되는 함수를 캐시에 저장

useRef : HTML요소나 컴포넌트의 메모리 주소를 가져와, 객체형식으로 관리

 

예시) 선택한 색상 출력

<script type="text/babel">
      const root = document.getElementById("root");
      const rootElement = ReactDOM.createRoot(root);

      const buttonState = [
        { number: 1, color: "pink" },
        { number: 2, color: "green" },
        { number: 3, color: "blue" },
        { number: 4, color: "red" },
        { number: 5, color: "yellow" },
        { number: 6, color: "purple" }
      ];

      //버튼 컴포넌트
      const Button = ({ number, color, clickFunction }) => {
        const handleClickButton = (color) => {
          console.log("color", color);
          alert(`선택한 색은 ${color} 입니다`);

          //HomePage 컴포넌트의 함수를 쓰기위해 props를 통한 함수설정
          clickFunction(color);
        };
        return (
          <button
            //값을 넘길때
            onClick={() => handleClickButton(color)}
            style={{ backgroundColor: color }}
          >
            {number}
          </button>
        );
      };

	  //홈페이지 컴포넌트
      function HomePage() {
        //Hooks
        const [selectedButton, setSelectedButton] = React.useState("");

        return (
          <React.Fragment>
            {buttonState.map((item, index) => {
              return (
                <Button
                  key={index}
                  number={item.number}
                  color={item.color}
                  //버튼 컴포넌트에 적용시키기 위해 props로 넘긴다.
                  clickFunction={setSelectedButton}
                />
              );
            })}
            <h1>내가 선택한 색은 {selectedButton}색입니다.</h1>
          </React.Fragment>
        );
      }

      const element = <HomePage />;
      rootElement.render(element);
    </script>

 

 

 

 

Hooks Rules

1) 최상위에서만 Hook 호출
 - 반복문, 중첩된 함수, 조건문 등 호출 x

2) React 함수에서만 Hook 호출(일반적 Js함수 X)

3)Hook을 만들때 앞에 use붙이기
 - Hook 규칙 적용되는지 파악 가능

4)React Hook 호출되는 순서에 의존
 - 위에서 아래로 순서에 맞게 동작