useEffect4 [React] useEffect와 관련되어 순차적으로 에러 핸들링 해보기 데이터를 불러오는 과정을 만들고자 한다.그 과정에서 useEffetc를 통해 에러핸들링을 순차적으로 만들어보면서 에러가 나는 부분을 해결하고자 한다. 이 글을 보기 전에 커스텀 훅의 개념과 useEffect의 실행시점, useCallback에 대해 알고 가면 좋다.아래를 참고하자https://be-senior-developer.tistory.com/157 [React] Custom Hook에 대해 알아보자목차 Custom Hook의 정의리액트 훅의 첫번째 규칙은 리액트 훅은 리액트 컴포넌트안에서만 사용해야 한다.이 첫번째 규칙을 더 유연하게 만들어 주는 것이 Custom Hook으로 컴포넌트에들어가 있는 함be-senior-developer.tistory.comhttps://be-senior-develo.. 2024. 8. 10. [React] useEffect의 실행 시점에 대해 알아보자 목차 useEffect의 실행 시점import { useEffect } from "react";function Practice(){ console.log('1'); useEffect(()=>{ console.log('mount'); }, []); console.log('2'); return }export default Practice; 컴포넌트의 랜더링이 끝난 후 useEffect가 실행된다는 것을 알 수 있다. 위에서 콘솔에 두번 찍힌 것은 React의 엄격 모드 때문에 두번 실행된 것이다. 클린업 함수의 실행 시점import { useEffect, useState } from "react";function Practice() { const [input, se.. 2024. 8. 9. [React] useEffect와 관련해 더 개념을 알아보자 목차 내가 프로젝트를 진행하면서 알게 된 것들에 대해 정리 해보고자 한다. key와 index에 대해 더 알아보자아래 코드를 보면 Question 컴포넌트에 key값과 인덱스 값을 전달해 주고 있다. 1. key대신 index를 넘기기key는 리액트의 기본 속성이라 오류에 직면하기 때문에 프롭스를 통해 전달해 값을 쓰려면 index를 통해 전달해 쓰자 2. key의 역할: 리랜더링key를 설정했는데 그 이유는 리랜더링이 일어나기 위해서는 값이 변화해야하는데 키를 통해 변화를 주어 리랜더링을 일으키고자 했기 때문이다. 3.key는 여러 컴포넌트에서 사용 금지key는 unique한 값이기 때문에 여러 컴포넌트에서 동일한 키를 쓰게되면 예상치 못한 오류에 직면한다. import { useState, use.. 2024. 7. 23. [React] sideEffect가 무엇이고 useEffect에 대해 알아보자 목차 Side Effect란?코드가 의도한 주된 효과 외에 추가적으로 발생하는 부수 효과를 말한다.리액트에서는 현재의 컴포넌트에 직접적인 영향을 미치지 않는 작업이라고 한다. 현 컴포넌트 랜더링의 과정에서 필요하지만 직접적이고 즉각적으로 영향을 미치지 않는다. sideEffect 예시컴포넌트 함수의 주된 목적은 랜더링이 가능한 jsx 코드를 반환하는 것인데아래코드는 좌표를 가져오고 정렬하는 것이므로 직접적인 영향이 없어 sideEffect임을 알 수 있다. //side effect navigator.geolocation.getCurrentPosition((position) => { const sortedPlaces = sortPlacesByDistance( AVAILABLE_PLACE.. 2024. 7. 19. 이전 1 다음 728x90
