React Hook

1. useState - 상태값 관리

• useState는 상태값을 관리할 때 사용한다.
• 컴포넌트 내에서 사용될 state 변수 값과 그에 해당되는 setter method를 함께 생성하여 배열 형태로 전달해준다.

const counter = () => {
  const [count, setCount] = useState(0);
  
   const increaseCount = () => {
    	setCount(count + 1);
    }
   }

2. useEffect - 라이프사이클 관리

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있게 해주는 리액트 Hook
  • (클래스형 컴포넌트의 componentDidMount & componentDidUpdate를 합친 형태)

3. useMemo - 성능 최적화를 위한 메모리제이션된 값을 반환

• Memo한다 생각! 두번째 인자[]가 바뀌기 전까지는 변하지 않음!
• 즉, 복잡한 함수 결과 값을 기억함

 const invitedChannel = useMemo(() => {
    return userData?.brandList?.filter((brand) => !brand.masterFlag);
  }, [userData]);

4. useRef

• Javascript에서는 특정 DOM을 선택해야 할 때 getElementById, querySelector 와 같은 DOM Selector 함수를 사용해서 DOM을 선택