React Hooks

React Hooks란?

React Hooks는 ReactConf 2018에 발표된 class없이 state를 사용할 수 있는 새로운 기능

React Hooks이 필요한 이유
항상 기술은 그 전에 것의 불편함이나 문제점을 해결하기 위해서 더욱 발전

그와 같이 React Hooks도 주로 Class Components로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었고, 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용

React Component

• Class Component
  • 더 많은 기능 제공
  • 더 긴 코드 양
  • 더 복잡한 코드
  • 더딘 성능
• Functional Component
  • 더 적은 기능 재공
  • 짧은 코드 양
  • 더 심플한 코드
  • 더 빠른 성능

클래스 컴포넌트에서 함수 컴포넌트로 바꾸는 순서

• 컴포넌트 자체를 바꾸기

export default class App extends Component {
  state = {
    todoData: [],
    value: "",
  };

  btnStyle = {...}
  render() {
            return(...)
             }

------------------------------------------------
 
export default function App() {
  state = {
    todoData: [],
    value: "",
  };

  btnStyle = {...}
  return(...)
              

• State를 useState Hook으로 바꾸기

export default class App extends Component {
  state = {
    todoData: [],
    value: "",
  };

  btnStyle = {...}
  render() {
    return(
      ...
   )
 }
}

---------------------------------------------
import { useState } from "react";

export default function App() {
const [todoData, setTodoData] = useState([]);
const [value, setVlaue] = useState("");
  
return(
  ...
  )
}

첫 번째 인수 = 변수 이름, 두 번째 인수 = State를 정하는 함수

• 함수 및 변수 정의 방법 변경

handleCompleteChange = (id) => {
  let newTodoData = todoData.map((data) => {
    if (data.id === id) {
      data.completed = !data.completed;
    }
    return data;
  });
  setTodoData(newTodoData);
};
------------------------------------------------------
const handleCompleteChange = (id) => {
    let newTodoData = todoData.map((data) => {
      if (data.id === id) {
        data.completed = !data.completed;
      }
      return data;
    });
    setTodoData(newTodoData);
  };

State와 props

• State
  • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달 하려면 State사용
  • ex) 검색 창에 글을 입력할 때 글이 변하는 것은 State를 바꿈
  • State는 변경 가능(mutable)
  • State가 변하면 re-render 됨
    State 사용

import React, { useState } from 'react';

const Counter = () => {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

출처 : 링크텍스트

• prosp
  • props는 properties의 줄임말
  • props는 상속하는 부모 컴포넌트로 부터 자식 컴포넌트에 데이터를 전달하는 방법
  • props 는읽기 전용(immutable)로 자식 컴포넌트 입장에서는 변하지 않음(변하게 하고자 하면 부모 컴포넌트에서 State를 변경시켜줘야 함)

props 지정

<Dog name="Ari" age={10} />
<Dog name="Bori" age={7} />

출처 : 링크텍스트
props 사용

// <객체 인자를 통해 props 받아오기>

function Dog(props) {
  consol.log(props)
  //결과
  //{name:'Ari', age:10}
  //{name:'Bori', age:7}
  
	return {
		<div>{props.name}</div>
		<div>{props.age}</div>
	}
}

출처 : 링크텍스트