react7 프로젝트를 할거야. React와 Vite로. 프로젝트를 할거야.가장 많이들 사용하는 것이 React다. 많이 사용하는 데는 그 이유가 있다. React는 컴포넌트를 기반으로 UI( User Interface ) 를 효율적으로 관리하는 JavaScript 라이브러리다.React를 너무 간단한게 한 문장으로 표현했지만, 그 안에 내포된 의미는 꽤 많다.컴포넌트를 기반으로 UI를 만든다효율적으로 관리한다. 컴포넌트 기반으로 UI를 만든다.하나의 페이지를 구성할 때, 한 페이지에 들어가는 내용을 처음부터 끝까지 구현한다고 생각해보면…. 정말 너무 보기가 힘들것 같지 않은가@_@….. React는 한 페이지에 들어가는 내용을 블럭을 쌓듯이 컴포넌트로 조립해 만들 수 있다. 이러한 컴포넌트의 장점으로는 독립성과 재사용성을 들 수 있다. 각각의 컴포넌트는 함수.. 2024. 12. 10. 리액트 애플리케이션은 어떻게 동작하나? 리액트의 렌더링 프로세스와 동작 원리리액트는 Virtual DOM을 이용해 DOM 업데이트를 효율적으로 처리하는 자바스크립트 라이브러리입니다. 이 글에서는 리액트가 어떻게 페이지를 렌더링하고 상태 변화에 따라 업데이트하는지 그 과정을 정리합니다. 리액트 렌더링의 기본 개념리액트는 컴포넌트 기반 구조로 구성되며, UI를 작은 단위로 나눠 관리합니다.Virtual DOM을 사용해 실제 DOM 조작을 최소화하며 성능을 최적화합니다.리액트는 렌더링 과정에서 Render Phase와 Commit Phase로 나누어 동작합니다. 리액트 렌더링 과정 요약Render Phase 컴포넌트가 변경될 때마다 새로운 Virtural DOM이 생성됩니다. 이전에 생성되었던 Virtual DOM과 새로운 Virtual DOM을 .. 2024. 10. 23. useMemo, React-hooks(4) 8-4 useMemo 함수 컴포넌트 내부에서 발생하는 연산을 최적화 시키는 Hook이다. 리액트에서 컴포넌트의 렌더링은 state업데이트, 부모컴포넌트 업데이트 등으로 인해 수시로 일어날 수 있다. 이러한 경우에 불필요한 중복 연산이 발생할 수 있으며 memoization을 활용한 useMemo로 연산을 최적화 시킬 수 있다. Memoizatioin 이란? 기존에 수행하던 연산의 결과물을 어딘가에 저장해두고 동일한 값이 들어오면 재활용하는 기법이다. 랜더링마다 호출되는 컴포넌트 함수 일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성이 됩니다. function MyComponent(props) { // 어떤 로직 (JavaScript) return; /* 어떤 화면 (JSX) */ } fu.. 2022. 8. 10. useReducer, React-hooks(3) 8-3 useReducer useState와 useReducer는 컴포넌트의 상태를 관리하는 hook이다. useReducer는 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태관리를 할 수 있다 useReducer를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. 1. 컴포넌트 외부에 상태 업데이트 로직의 reducer함수 작성 기본형태 : function reducer(state, action) { ... } function reducer (state, action) { switch (action.type){ case 'INCREMENT' : return {value : state.value+1} case 'DECREMENT': retu.. 2022. 8. 10. useEffect, React-Hooks(2) useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-2 useEffect 기본형태 : useEffect( function, deps ) function : 수행하고자 하는 작업 deps(의존배열) : 배열 형태이며, 배열 안에는 검사하고자 하는 특정값 or 빈배열이 들어간다 1. 마운트 될 때만 실행하고 싶을 때 = 컴포넌트가 처음 나타날 때만 실행하고 싶을 때 함수의 두 번째 파라미터(dep.. 2022. 8. 10. useState, 가장 기본적인 React-Hooks useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-1 useState const Counter = ()=>{ const [value, setValue] = useState(0) useState 함수를 호출하면 배열을 반환 첫번째 원소 value = 현재 상태값 변수이고 두번째 원소 setValue = 상태값을 갱신해주는 setter함수다 useState 괄호 안의 값은 초기 상태값이다. //.. 2022. 8. 10. (브라우저 렌더링 과정) 브라우저가 사용자에게 어떻게 UI를 그려내는가! 브라우저 렌더링 동작 과정 브라우저는 사용자가 원하는 정보를 웹에서 페이지를 찾아 보여주고, 하이퍼링크를 통해 사용자를 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 MDN에서는 정의하고 있다. **브라우저 : 인터넷 접속시 사용하는 Chrome, Safari, Firefox, Internet Explorer 등 웹 : 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 세계적인 정보 공간 브라우저는 유저가 선택한 페이지, 이미지, 비디오 등의 컨텐츠들을 서버로부터 받아와 렌더링 과정을 거쳐 유저에게 보여준다. 브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. Parsing : HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. Style : 두 Tree.. 2022. 3. 16. 이전 1 다음
