Youngble_개발스토리

커스텀 훅이란 ? 말그대로 개발자의 입맛에 맞게 커스텀하여 만든 훅이다. 리액트 내장함수의 useState, useReducer, useEffect 등 use로 리액트훅처럼 사용할 수 있게 개발자가 커스텀하여 만들어 사용하는 것이다. 커스텀 훅은 정규함수(regular function)과 달리 재사용가능한 함수(Re-usable functions)에 상태(state)를 설정하는 로직을 아웃소싱 할 수 있다. 쉽게 풀어 말하면 정규함수(regular function)과 달리 커스텀 훅은 다른 커스텀훅을 포함한 리액트 훅을 사용할 수 있다. 왜냐하면 기존 정규함수에서 리액트 hook을 쓸수없도록 되어있는데 커스텀 훅에서는 사용 가능하기 때문이다. 따라서 useState, UseReducer, useEffec..

일단 react.memo, useMemo, useCallback를 설명하기 앞서 왜 쓰게 되는지, 써야하는 이유가 무엇인지부터 설명 할려고한다. 리랜더링(re-rendering), 재평가(re-evaluate), 재실행(re-run/re-execute) 먼저 리액트의 특성 중하나가 가상돔(Virltual DOM)인데 이는 변화된 state, props 등의 Jsx에서 이전상태와 현재 상태를 비교하여 변한부분만 업데이트 시킨다는 것은 알 것이다. 그말은 state가 변하지 않는다면 해당 컴포넌트의 태그들은 업데이트가 되지 않는다는 것인데 가상돔의 업데이트와 리랜더링과 재평가, 재실행은 같은 맥락이 아니다. 업데이트가 안된다고해서 리렌더링, 재평가, 재실행이 안되는게 아니다. 예를들어 App.js 에서 Ap..

Sourcemap은 creact-react-app으로 프로젝트를 빌드시 다음과 같이 build 폴더에 static으로 생성되는데 .css.map이나 .js.map의 형식으로 되어있는경우 배포시 기본적으로 webpack으로 번들링된 파일과 대응되는 sourcemap이 생성된다. 아래처럼 브라우저에서 원본 소스처럼 볼수있다 Sourcemap(소스맵) 사용 이유 Sourcemap는 주목적은 디버깅이다. 배포 후에 에러나 버그가 발생했을시 만약 원본 소스를 볼수없다면 어디서 에러가 났는지 디버깅하기 매우 까다롭다 하지만 소스맵을 통해 원본 소스 체크하여 어디부분인지 확인할 수 있다. 이러한 편의성을 제공하는 것이 소스맵 이다. Sourcemap(소스맵)을 제거해야 하는 이유 이러한 편의성이 있는 반면에 다른사람..

contextAPI는 왜 쓰는가? 위의 그림을 예시로 최상위 컴포넌트 App을 중심으로 하위 컴포넌트들의 트리구조를 확인할 수있는데, 리액트를 사용하면 state관리하면서 해당 컴포넌트에서도 사용을위해 props로 하위 컴포넌트에 state를 전달해주게 되는데 이렇게되면 위의 사진처럼 Login이라는 state를 LoginForm 컴포넌트에서 사용하고 setState로 변화시켜 이 state는 Shop, Cart 컴포넌트에도 영향을 미치는데 전달할수있는 connection이 없다. 또한 Product컴포넌트에서 Add to Cart 라는 장바구니 기능역시 Cart라는 컴포넌트에 영향을 주게 되지만 서로 연결점이없기 때문에 이를 최상위 컴포넌트인 App 컴포넌트에서 state를 생성하여 전달해줘야하는데 이..

프로젝트 진행하면서 useRef를 사용해야하는지에 대해서 검토하기위해서 여러 정보를 얻을때 꼭 useState와 useRef의 비교를 하고 그에 대한 글만 있다. 많이 써봤기때문에 당연히 차이는 리랜더링 되고 안되고 차이, input 값을 참조할수있다는 점 등에 대해서는 알고 있었지만 나는 궁금했던게 useRef를 쓰면 ref의 current 값이 변하더래도 리렌더링 되지않는다는면에서 useState와 차이를 가지고 쓸데없는 렌더링이 없는 경우를 생각해서 쓴다 라고했는데 그러면 useRef와 일반적인 변수선언할당으로 관리하는 state차이는 무엇이지? 라고 생각했다. 어차피 리랜더링이 필요없다면 useRef를 쓰던 일반 변수에 값을 사용하면 되지않을까? 굳이 useRef를 쓸필요가 있냐가 나의 관점이였다..

다음과 같이 useEffect를 사용하여 jQuery메서드 on 으로 해당 요소를 이벤트 등록을 해주었다. 그런데 해당 태그를 눌러 이벤트가 발생하면 2번이 실행돼서 왜이러지? 찾아보니깐 useEffect부분에서 두번 실행돼서 등록이 2번 되니 한번 클릭해도 두번의 이벤트가 발생하는 것이였다. 처음엔 랜더링이후 state값이 변하는게 있기때문에 한번더 했다라고 생각했는데, 해당 컴포넌트에서는 상태값을 쓰지도 않기때문에 이에 해당해서는 안되었다. 그래서 useEffect이 한번만 실행해야하는데 2번이 되는 이유를 찾아보니 index.js에서 strictMode가 존재하면 두번 랜더링된다고하는데 이 strictMode는 검사 도구라고 생각하면되고 개발 모드에서는 오류를 잘잡기위해 두번씩 렌더링을 한다고 한..

위의 사진처럼 전역 window 브라우저상의 스크롤이 아닌 컴포넌트 일정 영역안의 스크롤을 생성할시 보통 window.scrollTo(0,0) 으로 사용하라는 글이 많지만 직접 적용해보면 전체 윈도우에서 스크롤이 생긴게아니라 해당 컴포넌트로 접근해서 스크롤위치를 조절해줘야한다. 따라서 getElementById를 사용하여 시작하는 스크롤 해당 컴포넌트에서 .scrollTo(0,0) 을 해주면된다. 이때 매번 이벤트를 감지하기위해 useLocation을 사용하고, useEffect의 2번째 인자로 해당 경로 path가 달라질때마다 실행하게 하는것이다. 자세한 코드는 아래와 같다. App.tsx> 참고사이트: react에서 scrollTo 메소드로 스크롤 이동이 안될 때 window.scrollTo(0, 0..

portal은 부모 컴포넌트의 DOM 계층 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법 컴포넌트의 HTML 컨텐츠를 다른 곳에 옮길때 사용 이런식으로 jsx코드 노드가 여러가지 있다고 치면 createPortal을 사용하여, 원하는 html 위치에서 렌더링 되게 할수있다. 이를위해 index.html 에서 id 가 “root”과 같은 위치에서 랜더링하고싶다면 옆에 식으로 만들어주고 해당 컴포넌트 js에서 import '원하는이름' from ‘react-dom’ 해주고 js작성 구역에 아래와같이 해당 div 컴포넌트를 Backdrop 컴포넌트 함수안에 return으로 담아주고 return 부분에서 원하는 위치에서 ReactDom.createPortal(, document.getElementBy..

조건부 컨텐츠 conditional content {}중괄호에 삼항연산자를 써서 반영-> 이게 컨텐츠를 조건부로 렌더링하는것이다. 또한 && And operator를 사용할수도있다. 만약에 rutrn 부분에 이렇게 길어지는 조건부를 넣고 싶지 않다면 JSX태그를 변수에 담아서 쓸수있고 return 위에 JS를 쓸수있는 거기 때문에 if문도 사용하여 snippet 코드로 쓸수있다. 예를들어 {Filter.length===0 && no Content} {filter.length>0&&filter.map((expense)=> { })} return에 이러한 JSX코드가 있다면 다음과 같이 return 바깥 부분에 다음과 같이 바꿔 사용할수있다. let expenseContent=no Content if(fil..

기존에 return 부분에서 JSX 문법 태그들을 map 하여 프로젝트를 여러번 진행하였다. 이때는 정신없이 결과를 만들기위해서 깊게 다뤄보지 못한 return에서 렌더링하는 map함수와 그안에있는 태그들을 다뤄보겠다. 여기서 무의식중에 '아 soundTrack이라는 배열안에 정리되어있는 객체들을 map함수로 맵핑해서 그 객체에 접근해서 각각의 키값을 원하는 컴포넌트 안에 값을 넣어줘서 출력하게 해줘야겠다' 까지 생각하고 썼다. 그런데 좀더 디테일하게 들어가보면 배열안에 객체에 접근해서 사용한다는건 알겠는데 그위로 , , 들도 똑같이 맵핑된다는건데 이는결국 {[, , ] } 이런식으로 배열안에 태그들이 들어가게된다는거다. 좀더 심플한 예제로 이와같이 JSX 문법안에서 JS를 사용하기위해 중괄호를 쓰고{}..