코딩 정보/React36 [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. [React] useRef의 응용과 createPortal 에 대해 알아보자 목차 useRef를 통해 코드 간소화하기아래처럼 input에 값을 넣고 변경하는 것을 만들려면 불필요하게 상태와 코드가 많이 필요하다.import { useState } from "react";export default function Player() { const [Name, setName] = useState(""); const [edit, setEdit] = useState(true); function handleChangeNmae(e) { setName(e.target.value); } function handleSubmit() { setEdit(false); } return ( {edit ? "Welcome unknown entity" : `Welcome.. 2024. 7. 4. 이전 1 ··· 4 5 6 7 8 9 다음 728x90
