- CASE: 특정 상황에서만 동작되어야 하는 함수가, Component의 렌더링 조건에 따라 지속적으로 함수가 실행되는 경우 예시 이런 경우. countActiveUser는 users가 변화가 있을때만 다시 실행되어야 하는데, 예시코드처럼 로직을 짜면 모든 state변화마다 count가 다시 호출되어 실행된다. 이러한 경우에 useMemo를 사용한다. useEffect와 사용법은 유사하다. useMemo의 동작조건을 설정하고, 그 변수에 내가 원하는 상황을 등록해주면 된다. - useRef와의 차이 useMemo는 deps가 변경되기 전까지 값을 기억하고, 실행후 값을 보관하는 역할로도 사용한다. 얘는 복잡한 함수의 return 값을 기억한다는 점에서 useRef와는 다르다. useRef는 특정 값을 ..

- useRef의 사용처: 기존 기타 프레임워크에서 getElementID나 쿼리셀렉터를 이용해 DOM요소를 선택한다. React에서는 특정 DOM요소에 대한 조작이 필요한 경우(DOM의 위치정보를 가져와 조작한다거나 하는 경우) ref를 사용한다. - useRef의 사용 1) useRef 객체 생성 2) DOM요소에 객체 할당 3) current로 객체를 초기화 4) focus()를 이용하여 초기화시킨 객체(DOM요소)를 잡는다 - useState와의 차이: useRef는 component를 변화시킨 후 다시 rendering하지 않는다. 따라서 DOM요소와 별개로, 렌더링이 필요하지 않는 state는 ref로 관리한다. - useRef로 state 관리하기 예시: DOM을 조작하는 예시는 많은데, r..

기존 class형 리액트는 컴포넌트의 LifeCycle과 Logic이 매우 밀접하게 결합되어 있어, 재사용시 문제가 많았다 그랫거 HOC(Higher Order Component)를 이용하여 재사용 로직을 떼내는 방식으로 발전 시켰는데 이렇게 되면 계속 HOC를 가져다 붙이니 wrapper를 중복으로 덮어 복잡해짐과 동시에 여러 로직이 life cycle마다 흩어지게 된다. 이러한 구조는 SRP라는 단일책임원칙을 지키지 못한다. 그래서 Hooks라는 새로운 방법이 제시되었고, 얘는 함수로 로직만 정의하고, LifeCycle는 useEffect로, state는 useState로 따로 관리한다. 실제로 useEffect를 까보면 function useEffect(effect: EffectCallback, i..

리액트에서 워낙 많이 쓰이는 개념이라 한 번 정리 맨처음 컴포넌트가 render될때는 mount 과정을 거친다 그러나 props나 state가 변경되어 render 될 때는 mount를 거치지 않음 그니까 mount는 DOM이 생성되고, 웹 브라우저상에 처음으로 나타나는 과정을 말한다

이전에 했던 것들 블로그로 정리 중인데... 지금보면 '당...연한건데?' 싶은게 많다 그래도 까먹지 않게 정리중 ㅠㅠ 화면이 처음으로 렌더링되면 바로 dataFlow()라는 함수를 작동시키고 싶었는데 문제는 얘가 props는 받아야 작동을 하는게 의미가 있다는 것. 초기에 useQuery만 줄창쓰다가 삽질했는데 이런 케이스는 useEffect()로 props을 채운다는 조건을 달아두고 useLazy쿼리로 함수를 발동하도록 만들면 된다

얘는 원래 자바스크립트 항목인데 리액트에서 하도 많이 쓰길래... babel은 자바스크립트 컴파일러다 레가시 브라우저는 보통 ES5버전의 자바스크립트를 동작시킨다. 하지만 프론트 기술이 너무 빨리 발전하면서 다양한 자바스크립트 문법 및 기능들이 등장했다. 따라서 최근에 만든 웹페이지들은 레가시 브라우저에서 동작이 힘들다 이에 대한 보완을 위해 babel을 사용한다. 즉, 최신 자바스크립트 코드를 ES5 환경에서 돌아가도록 컴파일하는 것이다. 우리가 보편적으로 알고있는 컴파일과 달리 언어->언어 컴파일러라고 할 수 있다 대충 이런과정을 거친다 자바스크립트 V8엔진이 돌아가는 방식과 뭔가 비슷해 보인다. babel plugin이나 preset같은 개념도 있지만, 여기선 폴리필만 언급해본다. 바벨-폴리필은 코..