WIL (4) (5/30~6/4)

sparrowscout·2022년 6월 5일
0

WIL

목록 보기
4/7
post-thumbnail


잘 꾸며둔 남의 집에 아무도 없길래 몰래 가서 조금 풍류를 즐겨줬다.

🐤 라이프사이클 (클래스형 vs 함수형)

가상돔
돔에 연산이 너무많이 일어나게됨 -> 가상돔, 가짜 돔을 하나 만듬. 메모리 위에서만 돌아가는 돔임.
토글 버튼을 눌렀다. 그러면 가상 돔에다가 일단 올려봄. 그래서 진짜 돔이랑 비교함. 그래서 바뀐 부분만 진짜 돔에 적용하는 것임.

변경 사항을 전부 다 넣고 마지막에 진짜 돔에 바뀐것만 적용하는 것.

진짜 돔을 어떨때 새로 그림? (리렌더링)

1. 진짜 돔 만들때
2. 데이터가 변했을 때

가상돔을 쓰면 진짜 돔을 매번 업데이트할 때보다 확연히 빠르게 연산할 수 있음.

실제 돔을 건드리는 빈도가 줄었으니까. 근데 가상돔도 계속 업데이트하고 뭘 계속 만들고 연산이 필수적으로 들어가긴 함. 사이트 구조에 따라사 연산을 줄일 수 있음. 사이트 구조에 따라서 가상돔보다 진짜돔에다가 만져주는게 더 빠를수도있음.

사이트 구조에 따라서 진짜 돔을 쓰는게 나을 수도 있음.

라이프 사이클
컴포넌트가 나타났다가 사라지기까지의 한 과정, 컴포넌트 생명주기

라이프 사이클 컴포넌트는 클래스형 컴포넌트에서만 쓸 수 있음.
근데 리액트 훅을 사용해서 함수형 컴포넌트에서도 쓸 수 있음.

🐤 react hooks

📎 [React] 리액트 훅 💪

리액트 훅(React Hooks)

Hook이란? Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.

클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능입니다.

기존 방식의 경우 상태 관련 로직이 한 곳에 묶이기 때문에 상태 로직의 재사용이 불가능하였으며 테스트 또한 어려웠습니다. 하지만, 훅을 도입함으로써 상태 관련 로직을 추상화할 수 있게 되어 재사용과 테스트가 가능하게 되었습니다. 즉, 훅을 통해 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 되었습니다.


Hook의 규칙

1. 훅은 최상위 레벨에서만 호출 가능합니다. 다시 말해 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안 됩니다.
2. 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다.

리액트 훅 사용 규칙을 지킴으로써 컴포넌트가 여러 번 렌더링 되어도 훅의 호출 순서를 동일하게 유지할 수 있으며, 훅이 여러 번 호출되어도 훅의 상태를 올바르게 유지할 수 있습니다. 또한, 컴포넌트의 모든 상태 관련 로직의 직관성을 높일 수 있습니다


리액트 내장 훅 API

기본 Hook
useState
useEffect
useContext

추가 Hooks
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

1. useState()

const [state, setState] = useState(initialState);

이것은 class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있습니다.

  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

useState는 인자로 초기 state 값을 하나 받습니다. 카운터는 0부터 시작하기 때문에 위 예시에서는 초기값으로 0을 넣어준 것입니다. this.state와는 달리 useState Hook의 state는 객체일 필요가 없습니다. 물론 원한다면 그렇게도 가능하지만요. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용됩니다.

하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수도 있습니다.

2. useEffect()

useEffect(didUpdate);

React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다.

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMountcomponentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

// componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
// 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

기본적으로 React는 매 렌더링 이후에 effects를 실행합니다. 첫 번째 렌더링도 포함해서요.

Effect를 “해제”할 필요가 있다면, 해제하는 함수를 반환해주면 됩니다.

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

이 예시에서 컴포넌트가 unmount될 때 React는 ChatAPI에서 구독을 해지할 것입니다. 또한 재 렌더링이 일어나 effect를 재실행하기 전에도 마찬가지로 구독을 해지합니다.

3. useRef()

const refContainer = useRef(initialValue);

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

이것은 useRef()가 순수 자바스크립트 객체를 생성하기 때문입니다. useRef()와 {current: ...} 객체 자체를 생성하는 것의 유일한 차이점이라면 useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것입니다.

profile
프론트엔드 개발자

0개의 댓글