react5 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 다음
