React -4

김정현·2024년 4월 8일

error hooks

React

목록 보기

4/7

컴포넌트

컨테이너 컴포넌트 : 데이터 처리, 이벤트 처리, 여러 프리젠테이셔널 컴포넌트를 포함
프리젠테이셔널 컴포넌트 : 보이는 화면 구성

모델
-데이터 관련 로직

filter

-> 새로운 배열을 반환

Error

throw 에러 객체 -> 에러 발생
Error 생성자로 생성한 객체

throw new Error(메세지); -> 에러 발생, 실행 코드 중단

에러객체.message : 메세지

try, catch -> 에러 발생시 캐치 구문에서 에러 발생 구문 대체

try {
	//에러가 발생할 가능성이 있는 코드 (발생하면 throw)
} catch (에러 객체) {
	//에러 발생시 처리할 대체 코드
} finally {
	//에러가 발생하든 하지 않든 무조건 실행되는 코드
    //로그기록
}

Hooks

userState

useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다.

const [items, setItems] = useState(기본값);

-상태를 설정하는 함수에 파라미터를 넣어서 호출하면 상태값이 변경되고 컴포넌트가 리렌더링 된다.

setItems(값);
setItems((기존 상태값) =>....);

useEffect

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정함.

클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 변환해 주어야 한다.

const AddTodo = ({ onSubmit, onChange, todo, message }) => {
  useEffect(() => {
    // componentDidMount(), componentDidUpdate() - todo값의 변화에 의한 렌더링
    console.log('todo, message 값 변경 - 렌더링 후'); // (2)

    return () => {
      console.log('뒷정리 함수... / update'); // (1)  먼저 호출됨 (뒷정리 함수)
    };
  }, [todo, message]); // [...] // 변화 감지 기준

  useEffect(() => {
    console.log('마운트시 한번만 호출'); // componentDidMount()
    // DOMContentLoaded 비슷 (동일 X)
  }, []);

  
  useEffect(() => { // componentDidMount(), componentDidUpdate() - message
    console.log("message 값 변경");
  }, [message]);

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 떄 사용하는 Hook
(리덕스에서도 비슷하게 사용: 전역 상태 관리)

useMemo

함수 컴포넌트 내부에서 발생하는 연산을 최적화가능하다.
-메모제이션 기법, 캐싱

//기존 재귀함수

function factorial(num) {
    if (num <1) {
        return 1;
	}

    return num * factorial(num -1);
}

-> 메모리 효율이 비효율적이다.(했던 연산을 다시 호출하면 다시 반복한다.)

//메모제이션 기법을 이용한 재귀함수

function factorial(num) {
    factorial.cache = factorial.cache ?? {};
    const key = 'result_${num}';
    if (factorial.cache[key]) {
        console.log("캐시 이용");
        return factorial.cache[key];    
    }
        
    if (num <1) {
        return 1;
}

    const result = num * factorial(num -1);
    factorial.cache[key] = result;
    console.log("캐시 저장");
    return result;
}

-> 이미 했던 연산에 대해서 정보를 가지고 있다. (기존 정보에 대해서 다시 연산을 하지 않아도 된다.)

useCallback

이 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있다.

const onSubmit = useCallback((e) => {
    e.preventDefault();

    if (!todo.trim()) {
      setMessage('할일을 입력하세요.');
      return;
    }
    .
    .
    .
 }, [todo]);   //todo가 바뀔때마다 함수가 변경됨

함수형 업데이트

내부에서 변수를 변경하면 매번 함수가 다시 정의하게 되는데, 매우 비효율적이다. 이런 문제을 해결하기위해서 함수내부에 함수로 변수를 정의하는 함수형 업데이트를 사용하면 효율적인 함수 활용이 가능하다.
(함수를 한번만 호출하게됨)

// 할일 목록 완료 여부 토글(true -> false, false -> true)
  const onToggle = useCallback((id) => {
    // const newItems = items.map((item) =>
    //   item.id === id ? { ...item, done: !item.done } : item,
    // );
    // setItems(newItems);
    
    setItems((prevItems) => {
      return prevItems.map((item) =>
        item.id === id ? { ...item, done: !item.done } : item,
      );
    });
  }, []);