React - Hook

• 삭제 버튼을 누르면 삭제가 되는 걸 만들고 싶어요!!

1. array/userList.js에서 작성
2. function User({user, onRemove}) { return ( <div> <b>{user.username}</b> <span>({user.email})</span> <button onClick={() => onRemove(user.id)}>삭제</button> </div> ); } function UserList({users, onRemove}) { return ( <div> { users.map((user) => ( <User user={user} key={user.id} onRemove={onRemove} /> )) } </div>
3. App.js 에서 작업
4. .... const onRemove = id => { // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열 만듦 // user.id가 파라미터로 전달된 id인 것만 제거한 새로운 배열 생성 // filter를 사용하여 구현 -> true인 애들만 제거한다. setUsers(users.filter(user => user.id !== id)); } return ( .... <UserList users={users} onRemove={onRemove} /> {/* 등록사용자 출력 */}

---

• 선택에 의한 클릭 이벤트
  • app.js에서 배열에 active : bool 값을 추가한다.
  • 그 후 onToggle 메소드를 추가하며, 위와 같이 작업한다.

---

• 리액트 훅
  • 훅이란?
    1. 리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 되어 있음
    2. 히액트 훅의 새로운 기능 React 16.8 버전에 새로 추가된 기능
    3. 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부름
       • useState, useEffect, userRef…
    4. 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 하는 기능
  • 훅의 규칙
    • 최상위에서만 Hook을 호출한다
      • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
      • 해당 규칙에 따르면 컴포넌트가 랜더링 될 때마가 항상 동일한 순서로 Hook이 호출되는 것을 보장한다
    • 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다. (class는 안된다.)
  • 반드시 알아야할 기본 훅들
    1. useStae(초기값)
       • 배열 반환, 첫 배열의 요소는 현재값을, 두 번째 배열의 요소는 상태를 변경하는 setter
       • const [data, setData] = useState(”초기값”)
    2. useEffect (실행시킬 콜백함수, 값에 따른 랜더링 지정 - 배열타입)
       • useEffect의 첫 번째 매개변수는 실행 시킬 콜백 함수
       • 두 번째 매개변수는 배열[]을 사용하여 특정 값이 update될 때만 실행함
       • 컴포넌트의 라이프 사이클을 다룬다. 리액트 컴포넌트가 mount, mount이후, unmount 때 마다 특정 작업을 수행한다.
    3. useRef : 특정 태그에 이름 달기
       • snytax : useRed(초기값)
       • ex ) const nextId = useRef(4)
       • 이벤트를 사용할 경우에 특정 태그에 접근해서 핸들링하는 경우
       • arrow function에 event 매개변수를 이용해서 자신 태그에는 접근 가능함. 하지만 다른 태그에 접근해서 작업하기는 어렵다.
       • 이런 경우에는 useRef() 훅을 이용해서 특정 태그에 이름을 지정하고 핸들링 할 수 있다.
       • useRef는 초기값을 객체로 ({current:valu})로 저장하기 때문에 변수명.current로 현재 태그에 접근 할 수 있다
       • useRef로 관리하는 변수는 값이 바뀐다고 컴포넌트를 리렌더링 하지 않는다. 주로 다음과 같은 경우에 사용
         • setTimeout, serinterval을 통해서 만들어지 ㄴid
         • 외부 라이브러리를 사용하여 생성된 인스턴스
         • scroll 위치
         • 등의 값을 관리할 수 있다.
       1. useMemo : 연산한 값 재사용하기
          • 성능 최적화(메모리를 적게 잡음)를 위해서 연산된 값을 useMemo라는 훅을 사용하여 재사용
       2. useCallBack을 사용하여 함수 재사용하기
          • useCallback은 위에 useMemo와 비슷한 Hook !!
          • useMemo는 특정 결과값을 재사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고, 재사용하고 싶을 때 사용
       • Create, Toggle, Remove → useCallback 사용, useMemo를 기반으로 만듦
       1. 외부에서 state 사용하기 : useReducer()
          • useReducer는 state와 비슷하다.
          • useReducer는 외부에서 state를 관리할 수 있게 한다.
          • 리듀서 함수를 외부에서 export 하게 되면 로직을 분리할 수 있다. (재사용이 가능하다)
          • ex) const [현재값, 리듀서 action 함수] = useReducer(리듀서 함수명, state 값);
          • 리듀서 함수의 모형
          • const 리듀서 함수명 = (state 값, 리듀서 action 함수로 전달하는 상태 값) => { //초기값을 action 상태에 따라서 변경 return state 값; } ex) const reducer = (state, action) =>{ // 새로운 상태를 만드는 로직 // const nextState = ... // return nextState }
  • 컴포넌트 생명주기
    • 생성(mount) → 업데이트(updating) → 제거(unmount) 순서의 생명주기를 갖는다.
    • mount : 컴포넌트가 생성될 때 발생하는 생명주기
      • constructor : 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드, this.props, this.state에 접근이 가능하고 리액트 요소를 반환한다.
      • getDerivedStateFromProps
        • props로부터 파생된 state를 가져온다 즉, props 로 받아온 것을 state에 넣어주고 싶을 때 사용된다.
      • render : 컴포넌트를 랜더링하는 메서드이다.
      • componentDidMount : 컴포넌트 마운트 됨, 즉 컴포넌트의 첫번째 랜더링이 마치면 호출되는 메서드로 호출되는 시점에는 화면에 컴포넌트가 나타난 상태, 이 함수가 호출된 상태에서 DOM을 사양해야 하는 외부 라이브러리 연동, 해당 컴포넌트에서 필요로 하는 데이터 요청 등의 행위를 한다.
      • 이 때 useEffect()는 동작한다.
        • 사용 예)
        • userEffect ( () => { console.log("componentDidMount"); },[]) // 배열 부분이 비워져 있다. 컴포넌트 등록시 한 번 실행
      • updating : 컴포넌트가 업데이트 되는 시점에 어떤 생명 주기 메서드들이 호출되는 지 알아본다.
        • getDrivedStateFromProps : 컴포넌트의 props나 state가 변경
        • shouldComponentUpdate : 컴포넌트가 리렌더링 할지 말지 결정
        • componentDidUpdate : 컴포넌트가 업데이트 되고 난 후 발생
        • 이 경우와 비슷한 useEffect()의 동작
          • 의존성 배열이 변할 때 실행하는 것과 같다
        • 사용 예

        userEffect ( () => {
        	console.log("count or exampleProp changed");
        	},[count, exampleProp])
        

      • unmount : 컴포넌트가 화면에서 사라지는 것을 의미
        • componentWillUnmount : 컴포넌트 화면에서 사라지기 직전 호출, 여기서는 주로 DOM에 직접 등록했던 이벤트를 제거, 만일 setTimeout 설정이 걸려있느 넋이 있다면 clearTimeout을 통해 제거 추가로 외부 라이브러리를 사용하는 것이 있다면 해당 라이브러리에 dispose 기능이 있다면 호출 처리 하면 됩니다.
          • 사용 예시

          userEffect ( () => {
          	console.log("");
          	return (() => exampleAPI.unsubscribe();)
          	})
          

      • useEffect 안에서 객체 타입 state를 serState하는 경우 무한 루프에 빠질 수 있다. 이 때 해결 방안
        • https://kinsta.com/knowledgebase/react-hook-useeffect-has-a-missing-dependency/
• 예시

  import React, { useEffect } from "react";
  
  // User 컴포넌트
  function User({user, onRemove, onToggle}) {
      useEffect(() => {
          console.log('컴포넌트가 마운트되었습니다.', user.id);
          return () => {
              console.log('컴포넌트가 화면에서 사라짐')
          };
      },[])
  

• 
• mount 시에 하는 작업들
  1. props로 받은 값을 컴포넌트의 로컬 상태로 설정
  2. 외부 api 요청 (ract API 등등..)
  3. 라이브러리 사용 (D3, Video.js 등등...)
  4. setInterval을 통한 반복 작업 혹은 setTimeout을 통한 작업 예약
• unmount 시에 하는 작업들
  1. setTimeout, setInterval을 사용하여 등록한 작업들 clear 하기 (clearTimeout, clearInterval)
  2. 라이브러리 인스턴스 제거

---