TIL 31 | React Hook

Hook

• 리액트 함수형 컴포넌트 HooK은 기존 코드를 다시 작성할 필요할 없이 일부 컴포넌트들 안에서 HooK을 사용할 있다.

useState

• 함수형 컴포넌트에서 useState는 현재 state의 값과 업데이트 하는 함수로 쌍으로 제공한다.

• useState 클래스형 컴포넌트에서 this.state와는 다르게 이전 초기값과 새로운 state의 값을 병합하지 않는다.

• 즉, useState는 초기값은 첫 번째 렌더링에서만 딱 한 번만 사용된다.

// App.jsx
import { useState } from "react";

function App() {
  const [isClicked, setClicked] = useState(true);

  const handleClick = () => {
    setClicked(!isClicked);
  };

  return (
    <div className="App">
      <button type="button" onClick={handleClick}>
        {isClicked ? "ON" : "OFF"}
      </button>
    </div>
  );
}

export default App;

useEffect

useEffect는 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 함수이다.
즉, 클래스형 컴포넌트형의 라이프 사이클 메서드와 동일하다.

// Syntax
// function: 수행하자고 하는 작업
// deps : 배열 형태로 검사하고자 하는 특정 또는 빈 배열
useEffect(function, deps);

// TodoList.jsx
import React, { useState, useEffect } from 'react';
import uuid from 'uuid/dist/v1';
import Form from '../Form/Form';
import TodoItem from '../TodoItem/TodoItem';
import Button from '../Button/Button';
import './TodoList.scss';

function TodoList() {
  const [todoList, setTodoList] = useState([]);

  const addTodoDate = (value) => {
    setTodoList([
      ...todoList,
      {
        id: uuid(),
        content: value,
        isCompleted: false,
        created: new Date(),
      },
    ]);
  };
  
  // 1. 두 번째 매개 변수 아무것도 설정 않으면 렌더링 될 때 마다 실행.
  useEffect(() => {
    console.log('render', todoList);
    // 2. 두 번째 매개 변수에 빈 배열을 설정하면 컴포넌트 처음 생성 되었을 때 실행
    // 3. 두 번째 매개 변수에 특정값을 지정하면 업데이트 될 때 마다 실행
  });
 
  return (
    <main className="todo__main-wrapper">
      <div className="conatiner">
        <Form addTodoDate={addTodoDate} />
        <ul className="todo__all-wrapper">
          {todoList.map((item) => (
            <TodoItem
              key={item.id}
              item={item}
              isCompleted={item.isCompleted}
            />
          ))}
        </ul>
        <div className="button__group-wrapper">
          <Button name="all" />
          <Button name="complete" />
          <Button name="incomplete" />
        </div>
      </div>
    </main>
  );
}

export default TodoList;