본문 바로가기

분류 전체보기22

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.
브라우저 렌더링 과정 오늘은 브라우저 렌더링 과정을 알아보고, 그에 대한 최적화하는 방법을 알아보겠습니다. 지난 포스트를 작성하면서, script 옵션이나 위치에 따라 렌더링 순서나 최적화에 영향을 미치는 것을 알아보았습니다. 이 과정에서 브라우저에 화면이 어떤 순서를 통해 렌더링이 되는 지 알아보고 어느 부분을 신경써서 개선할 수 있는지 알아보기 위해 이번 포스트를 작성하였습니다. MDN 문서를 주로 참고하여 작성하였고 틀린 부분이나 잘못된 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 네트워크로부터 데이터를 받아온 이후, 브라우저 렌더링 과정은 다음과 같이 이루어집니다.구문 분석(parsing)렌더(render)상호작용(interactivity) 1. 구문 분석 (parsing)브라우저가 네트워크를 통해 받은 데이터를 .. 2024. 8. 9.
Script 로딩 방식 비교: defer vs $(document).ready() JQuery로 개발하던 중, script를 로딩할 때 defer와 $(document).ready()의 차이가 뭔지 궁금해졌습니다.이 포스트에서는 두 가지 방식인 HTML 파싱과 병렬로 스크립트 다운로드HTML 파싱 완료 후 스크립트 실행$(document).ready()$(document).ready(function() { // 코드 실행});스크립트 즉시 다운로드 및 실행DOM 완전 로드 후 내부 코드 실행2. 스크립트 위치별 비교스크립트 선언 위치에 따른 특징은 다음과 같습니다. 끝defer: HTML 파싱 중단 없이 다운로드, 파싱 후 실행$(document).ready():다운로드 즉시 실행, 내부 코드는 DOM 로드 후 실행스크립트 태그를 만나면 다운로드 되는 동안 HTML 파싱 중단차이.. 2024. 7. 31.
반응형

티스토리툴바