코딩 정보/React36 [React] Http 통신을 해보자 목차 프론트를 위주로 정리해서 백엔드 코드는 생략하겠다 데이터 받아오기아래와 같이 useEffect를 통해 통신으로 데이터를 받아온다.그렇지 않으면 무한 루프에 빠지게 된다.import Places from "./Places.jsx";import { useState, useEffect } from "react";export default function AvailablePlaces({ onSelectPlace }) { const [availablePlaces, setAvailableplaces] = useState([]); useEffect(() => { fetch("http://localhost:4000/places") .then((response) => { return .. 2024. 7. 30. [React] 랜더링 최적화 방법을 자세히 알아보자 목차React Component Tree리액트의 컴포넌트 트리는 다음과 같이 만들어 진다.App을 중심으로 순차적으로 만들어 진다. React Dev Tools이것을 이용하면 여러 분석으로 할 수 있다.아래와 같은 웹에서 increment 버튼을 눌렀을 때 렌더링을 분석할 수 있다. 컴포넌트 랜더링 이유 분석 방법 memo를 통한 랜더링 최적화 하기아래와 같은 코드가 있을 때 첫번째 상태인 enteredNum만 바꾸었는데 모든 컴포넌트가 리랜더링이 일어난다.따라서 이것을 막기위해서 memo를 사용한다.import { useState } from 'react';import Counter from './components/Counter/Counter.jsx';import Header from './c.. 2024. 7. 25. [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 ··· 3 4 5 6 7 8 9 다음 728x90
