React3 Props Drilling이란? React 애플리케이션에서 상태관리와 props 전달은 필수적인 요소입니다. 상황에 따라 자식 컴포넌트에 전달해야하는 경우가 많은데, 이때 props를 계속해서 전달하는 props drilling이 발생할 수 있습니다. 예를 들어, 로그인 정보를 생각해보면 서비스에 사용되는 대부분의 컴포넌트에서 로그인 정보가 필요할 수 있습니다.그렇게 되면 로그인 컴포넌트가 최상위 컴포넌트로 로그인 정보를 전달해주고, 상위 컴포넌트에서 하위 컴포넌트로 계속해서 props로 넘겨주는 상황이 발생할 수 있습니다.로그인 컴포넌트로부터 실제 사용하는 G, F 컴포넌트에 전달하기 위해선 회원 정보를 사용하지도 않는 A,B,C,D,E 컴포넌트를 지나가게 됩니다. 이렇게 Props를 계속 내려주는 것을 Props Drilling이라.. 2025. 2. 22. 상태 관리 (1). state와 props 오늘 가져온 주제는 상태 관리로, 앞으로 상태 관리 시리즈로 React의 state, context api, Redux와 같은 상태, 전역 상태에 관련된 글을 올릴 계획입니다. state(상태)란 무엇인가?React 하면 가장 먼저 떠오르는 것이 “상태 관리”라고 생각합니다.그만큼 React를 다루면 많이 사용하고, 사용할수록 더 고민이 많아지는 개념입니다.state는 컴포넌트 내에서 관리하는 데이터(일반 자바스크립트 객체)입니다.state의 가장 큰 특징은 다음과 같습니다.값이 변할 때마다 관련된 컴포넌트들이 다시 렌더링된다.값을 임의로 변경할 수 없다. (오직, setState를 통해서만 변경이 가능하다.)부모에서 자식으로, 자식에서 부모로 전달될 수 있고, 이 과정에서 Props Drilling이 .. 2025. 2. 9. 리액트 디바운싱, 쓰로틀링(Debouncing, Throttling) Debouncing과 Throttling이란?디바운싱(Debouncing)과 쓰로틀링(Throttling)은 특정 시간 동안 함수가 너무 많이 호출되는 경우, 함수 실행을 제어할 수 있는 기법입니다. 리액트 애플리케이션을 개발하다 보면, 사용자 입력이나 이벤트 핸들링 시 성능 문제에 직면할 수 있습니다. 이때 디바운싱과 쓰로틀링 기법을 활용하면 불필요한 함수 호출을 줄이고 애플리케이션의 성능을 향상시킬 수 있습니다. 동작 예시 디바운싱(Debouncing)디바운싱은 연이은 함수 호출을 그룹화하여 마지막 호출 이후 일정 시간이 지난 후에 한 번만 실행되도록 하는 기법입니다. 예를 들어, 검색어 입력 시 API 요청을 보내는 경우, 사용자가 입력을 완료할 때까지 기다렸다가 마지막 입력 이후 한 번만 API .. 2024. 7. 17. 이전 1 다음 반응형
