전체 글85 Redux - Redux 소개 # 리덕스가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 리덕스를 사용하면 State를 공유하고자 할때.. 2023. 4. 18. DOM과 Virtual DOM # 가상돔에 대한 소개 리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려준다. 자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 어마어마 하다. # DOM이란? 브라우저를 돌아다니다 보면 수 많은 컴포넌트로 구성된 웹페이지들을 보게 된다. 그 페이지를 문서(document)라고 하고, 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 한다. DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다. 트리의 요소 하나하나를 ‘노드’라고 부른다. 각각의 ‘노드’는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공한다. # DOM 사용 예시 // id가 demo인 녀석을 찾아,.. 2023. 4. 18. LifeCycle - 클래스형 컴포넌트에서의 라이프사이클 # 리액트 생명주기란? 리액트 컴포넌트는 각각 [Mount] → [Update] → [Unmount]의 과정을 거친다. 사람처럼 태어나고, 변화하고 죽는 것과 비슷하다. 리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보면 된다. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있다. # 생명주기 1. Mount 컴포넌트가 생성될 때를 말한다. 다음과 같은 메서드가 있다. constructor 컴포넌트가 맨 처음 만들어 질 때 호출 생성자 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount.. 2023. 4. 18. React Hooks - 최적화(React.memo, useCallback, useMemo) (1) 리-렌더링의 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 (2) 최적화 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법은 아래와 같다. memo(React.memo) : 컴포넌트를 캐싱 useCallback : 함수를 캐싱 useMemo : 값을 캐싱 # memo(React.memo) (1) memo란? 리-렌더링의 발생 조건 중 3번째 경우. 즉, 부모 컴포넌트가 리렌더링 되면 자식컴포넌트는 모두 리렌더링 된다는 것은 그림으로 보면 1번 컴포넌트가 리렌더링 된 경우, 2~7번이 모두 리렌더링 된다. 4번 컴포넌트가 리렌더링 된 경우, 6, 7번이 모두 리렌더링 된다. .. 2023. 4. 18. 이전 1 ··· 4 5 6 7 8 9 10 ··· 22 다음
