본문 바로가기

react38

[React] sideEffect가 무엇이고 useEffect에 대해 알아보자 목차 Side Effect란?코드가 의도한 주된 효과 외에 추가적으로 발생하는 부수 효과를 말한다.리액트에서는 현재의 컴포넌트에 직접적인 영향을 미치지 않는 작업이라고 한다.  현 컴포넌트 랜더링의 과정에서 필요하지만 직접적이고 즉각적으로 영향을 미치지 않는다. sideEffect 예시컴포넌트 함수의 주된 목적은 랜더링이 가능한 jsx 코드를 반환하는 것인데아래코드는 좌표를 가져오고 정렬하는 것이므로 직접적인 영향이 없어 sideEffect임을 알 수 있다. //side effect navigator.geolocation.getCurrentPosition((position) => { const sortedPlaces = sortPlacesByDistance( AVAILABLE_PLACE.. 2024. 7. 19.
[React] 랜더링의 동작과 관련 개념을 자세히 알아보자 목차 계속 공부를 하면서 여러 오류들을 직면하는데 그 중 하나가 랜더링에 관련한 것이었다.그래서 이번에 랜더링에 대해 정리해보고자 한다.  랜더링이란? 렌더링이란 React가 컴포넌트에게 현재 Props와 State에 기반하여 UI에서 어떻게 보여지고 싶은지 알려달라고 요청하는 과정입니다.   랜더와 커밋 단계렌더 단계 : 컴포넌트를 렌더링하고 변경 사항을 계산하는 모든 과정이 이루어지는 단계커밋 단계 : 변경 사항을 실제 DOM에 적용하는 단계커밋 단계를 거쳐서 DOM을 업데이트하고 나면, React는 요청된 DOM 노드와 컴포넌트 인스턴스를 가리키도록 모든 참조사항들을 업데이트합니다. 그리고나서 componentDidMount 와 componentDidUpdate 클래스 생명주기 메소드 또는 useL.. 2024. 7. 17.
[React] useReduce의 간략한 사용방법을 알아보자 목차  useReducer란?리액트의 useReducer는 상태관리와 상태 업데이트를 다루는 리액트 훅 중 하나로 복잡한 로직의 상태관리를 하거나 여러 컴포넌트의 상태를 공유할 때 이용한다. useState와 유사하나 더 구조적으로 꼭 사용해야 하는 것은 아니지만 필요할 때 선택적으로 이용할 수 있다.   간략한 용어 정리state -> 현재 상태dispatch -> 상태 변경 시 필요한 정보를 전달하는 함수reducer -> dispatch를 확인해서 state를 변경해 주는 함수initial state -> state에 전달할 초기값 예를 통해 알아보는 사용방법1. dispatch 만들어 주기shoppingCartreducer라는 상태 변경 함수를 첫번째 인자로 주고 두번째 인자로는 초기값을 전달해 .. 2024. 7. 14.
[React] context api를 이용해서 props drilling 막기 목차 프롭스 드릴링이란?컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미한다.이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 하는 비효율적인 문제가 생긴다. 그렇다면 프롭스 드릴링은 어떻게 막을 수 있을까? 1. 컴포넌트 구조를 바꾸기 바꾸기 전 코드Shop.jsximport { DUMMY_PRODUCTS } from "../dummy-products.js";import Product from "./Product";export default function Shop({ onAddItemToCart }) { return ( Eleg.. 2024. 7. 14.
728x90