dev_H dev_H

Redux, Flux Pattern Redux란? 리덕스는 자바스크립트 상태관리 라이브러리임 리덕스는 왜 생겨났을까? 리덕스가 나오기 전 프론트엔드쪽에서 데이터 흐름을 관리하는 방식은 MVC 패턴이었음 MVC 패턴은 Flux Pattern과 달리 양방향 데이터 흐름을 가지고 있음 즉, 모델이 변경되면 뷰가 변경되고, 사용자와의 인터렉션을 통해 뷰에서 변경이 일어나면 모델도 변경됨 이는 프로젝트가 점점 커지면 문제가 됨 -> 왜냐하면 데이터 흐름을 이해하기 어려워지기 때문에 버그가 발생하면 찾기 어려워짐(대표적인 예시 : 페북 - 알람 정보 업데이트가 제대로 안 되어 알람 표시 계속 유지) MVC Pattern Model: 데이터 형식이나 구조를 관리함 어플리케이션 정보, 데이터를 나타냄 또한 이러한 데이..

useCallback, useMemo, React.memo useCallBack, useMemo, React.memo 차이점 세 개 다 메모이제이션을 통해 불필요한 렌더링이 발생하지 않게 최적화할 수 있게 만들어주는 훅임 그러면 메모이제이션은 무엇을 뜻할까? 메모이제이션 기존에 수행한 연산의 결과 값을 메모리에 저장해두었다가 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 의미함 따라서 이 훅들을 적절하게 사용하면 중복된 연산을 피할 수 있기 때문에 성능 최적화에 도움을 줄 수 있지만 너무 많이 사용하면 메모리에 부담을 줌 useCallback : 함수를 캐싱 useMemo : 값 자체를 캐싱 React.memo : 컴포넌트를 캐싱 부모 컴포넌트가 리렌더링될 때 자식컴포넌트는 리렌더링 됨 그런데 만약..

useRef, useEffect useRef useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. 공식 홈페이지의 설명에 따르면 .current 속성이 전달된 인수로(initialValue) 초기화되는 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전체 수명동안 유지된다고 함 이를 풀어서 설명하면 아래와 같음 useRef는 변경 가능한 객체를 반환함 반환 객체는 useRef 인자를 current라는 속성 안에 저..

React useState useState란? const [count, setCount] = useState(0) 공홈의 정의 : 렌더링 사이에 데이터를 유지하기 위한 state 변수 + state 변수를 업데이트하고 리액트가 다시 컴포넌트를 리렌더링하게 하는 setState로 이루어진 상태관리 훅 좀 더 축약한 정의 : 데이터를 저장하고 유지할 수 있는 state를 가지고 setState를 통해 state의 상태를 관리하는 상태관리 hook setState는 기존의 state를 복사해 새롭게 state를 갱신 -> 객체의 불변성을 지킬 수 있음 -> 오류들을 미리 방지할 수 있음. setState를 통해 state에 변화가 생기면 알아서 리렌더링을 해주기 때문에 훨신 쉽게 상태관리를 할 수 있음 sta..