어제부터 공부를 해봤고
Effect Hook에 대하여 공부해본 내용을 작성하겠다.
틀린 내용이 많겠지만 열심히 써보겠다.
Hook 이란?
Hook은 함수형 컴포넌트에서도 class형 컴포넌트의 기능을 사용할 수 있게 하는 기능
기존에 함수형 컴포넌트에서 못하던 상태값 관리, 컴포넌트의 생명주기함수를 이용할 수 있게 됨
왜 만들어졌나?
기존 컴포넌트의 문제점
1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려움
2. 복잡한 컴포넌트들 이해하기 힘듬
3. class는 사람과 기계를 혼동
-> 문제점 해결을 위해 Hook이 만들어짐
장점
- 작성할 코드가 줄어듬
- 가독성 Up
- 재사용 가능한 로직을 쉽게 만듬
- 정적 타입 언어로 타입을 정의하기 쉬움
훅은 내장 훅과 여러 사람들이 만든 훅들을 조립해서 쉽게 새로운 훅을 만들 수 있어서 로직을 재사용하기 쉽다.
기본 제공 내장 훅
useState
code
import React, {useState} from 'react'; // 1. useState를 import하고
function App() {
const [result, setResult] = useState('hello'); // 2. 함수안에서 사용하면 끝
return (
<div onClick={setResult('bye')}>{result}</div> // 3. div를 클릭하면 상태값을('bye'으로) 변경하는 함수를 실행함
)
}const [result,setResult] = useState('hello');
// const [상태 저장 변수, 상태 갱신 함수] = useState(상태 초기 값);상태가 변하는(state) 값을 나타내는 내장 훅
useEffect
함수형 컴포넌트에서 사이드효과들을 실행하는 것
기존 클래스형 컴포넌트에서 생명주기 함수와 같은 효과
컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook
사용 방법
useEffect(function, array);
// useEffect(수행하고자 하는 작업, 배열형태의 배열 안에 검사하고자하는 특정 값 또는 빈배열을 넣는다.)실행되려면?
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되며 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
실행하는데 조건이 생긴다면?
(dependency array)
-
array 에 아무것도 없을 경우
-> 아무것도 없을 경우 위의 실행되려면 과 같이 렌더링 될때마다 useEffect가 실행된다. -
array 에 빈배열이 들어갈 경우
-> 이러한 경우 컴포넌트 생성 후 처음 화면에 렌더링이 될 때만 useEffect가 실행된다. -
array 에 조건이 들어갈 경우
import { useEffect, useState } from "react";
function App() {
const [count, setCount] = useState(0);
const [filter, setFilter] = useState('');
useEffect (() => {
document.title = `You clicked ${count} times`;
}, [count]);
//...밑 생략-> 위의 useEffect array에 state인 count가 생겼고 useEffect는 처음 렌더링 될때 실행된 이후 count 상태가 변할 때만 실행된다. filter가 아무리 변한다 할지라도 useEffect의 실행은 없다.
프로그래머스의 문제를 공부하다가 알게된 차집합 교집합 베타적 논리 합에 대해 써놓겠다.
let arr1 = [1, 2, 3];
let arr2 = [2, 3, 4, 5];
//차집합
let difference = arr1.filter(x => !arr2.includes(x)); // 결과 1
//교집합
let difference = arr1.filter(x => arr2.includes(x)); // 결과 2, 3
//배타적논리합(교집합을 제외한 나머지)
let difference = arr1 .filter(x => !arr2.includes(x)) .concat(arr2.filter(x => !arr1.includes(x))); // 결과 1, 4, 5써본다고 써봤지만 그렇게 잘 쓴것 같지는 않다. React 공식 문서를 조금 더 많이 살펴봐야할 것같다. 하지만 state가 어떻게 사용되고 useEffect가 어떻게 사용되는지 조금은 더 이해가 되고 useEffect를 사용하게 되면 생기는 side effect에 대해서 알 수 있었다.
또한 스프린트를 통해 fetch를 이용한 useEffect를 구현해봤고 어렵지만 재미있었다.
참고한 사이트
https://ko.reactjs.org/docs/hooks-intro.html
리엑트 공식문서
https://medium.com/@dayong/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85-react-hooks-1-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%86%8C%EA%B0%9C-eb02161b3ce4
리액트 훅(React Hooks) #1 간단한 소개
https://medium.com/@dayong/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85-react-hooks-3-useeffect-6b781a6c6769
리액트 훅(React Hooks) #3 useEffect😃 /공식 문서 번역
https://xiubindev.tistory.com/100?category=826117
React Hooks:useEffect()함수
