뇌 채우기 공간

우리의 프로젝트에 구글애널리틱스를 심어보자! 알고보니 어려운 것이 아닌데 자료가 많이 없어서 좀 헤맸던 부분이다. 이렇게만 하면 된다. 1. 구글애널리틱스에 가서 속성만들기 구글애널리틱스가 업그레이드가 되었다고 하는데 우리가 쓸 라이브러리는 이전버전이므로 유니버셜 애널리틱스 속성을 만들어준다. 2. 코드심기 왼쪽 하단 설정-> 추적정보-> 추적코드에 들어가면 id와 코드가 이렇게 나온다. 이 코드를 index.html의 head태그 안에 넣는다. 3. react-ga 설치 https://www.npmjs.com/package/react-ga react-ga React Google Analytics Module www.npmjs.com 4. App.js에서 추적하기 useEffect(()=>{ ReactG..

input박스에서 검색어를 치면 자동완성 기능을 만드려고 한다. 우리가 검색을 하려고 하는 기능은 1. 책검색 2. 사용자가 올린 태그 기반으로 컬렉션 검색 태그로 컬렉션을 검색하는 것은 태그가 별로 없기 때문에 글자를 칠때마다 요청을 보내는 것보다는 한번에 받아와서 프론트에서 처리하는게 낫다고 생각했다. 그래서 먼저 태그를 배열로 한번에 받은 다음에 Hint라는 라이브러리를 사용해서 구현했다. 이것은 다음 게시물에 담겠다. 그런데 책 검색 같은경우에는 책이 워낙 방대하다보니 한번에 받아오는 것은 불가능했다. 그래서 2글자 이상 쳤을때 디바운스를 이용하여 일정 시간동안 이벤트가 없으면 서버에 검색요청이 가도록 했다. 그리고 서버에서 받아온 값을 리덕스에 저장하고 리덕스에 있는 값을 밑에 띄웠다. 여기서 ..

문제발생 우리의 서비스에는 피드가 있다. 이 피드를 계속 구경하다가 다른 페이지를 갔다가 다시 오면 내가 보던 그 화면으로 갔으면 좋겠다. 처리 먼저 리액트 컴포넌트에다가 scroll이벤트를 주어야한다. 우리는 window자체가 스크롤이 되는 형태가 아니기에 div자체에 scroll이벤트를 주어야한다. 그러면 onscroll을 쓰면된다. 나는 최상위 컴포넌트 (styled componen)를 ref contain을 주었고 onscroll로 scroll이라는 함수를 넣어주었다. //scroll 이벤트 관련 const [scrollLocation, setScrollLocation] = useState(0); const lastScroll = useSelector(state=> state.review.curr..

react router에 tansition을 주고 싶어! 그래서 찾아봤던 것이 react-transition-group이다. React-Router는 현재 경로가 바뀌면 즉이 DOM에서 제거하기 때문에 화면을 겹쳐서 애니메이션을 주려면 history가 바뀌기 전에 애니메이션을 실행시켜야한다. 공식적으로는 react-transition-group 사용을 권장한다. 리액트 공식 라이브러리이다. 공식문서가기 모든 페이지에 트랜지션 주기 일단 모든 페이지에 트랜지션을 주는 것은 쉽다. TransitionGroup태그와 CSSTransition 태그를 Switch위에 감싸주면 된다. 라우터는 각각의 key를 갖게 되는데 그것을 pathname으로 준다. key를 가진 라우터에게 classNames가 pageSli..

상태 업데이트를 useState로 컴포넌트 내부에서 하는 방법도 있고 . useReducer를 사용해서 컴포넌트 바깥에서 사용할 수 있다 reducer : 상태를 업데이트 하는 함수 dispatch: 액션을 발생시킨다. 사용법 import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } reducer함수를 만들어주고 action의 type을 받아와서 case(액션) 마다 다음값이 무엇이 될지 return으로 설정해..

useCallback으로 이전에 만들었던 함수 재사용 하기 컴포넌트가 리렌더링 될때마다 새로운 함수를 계속 만들고 있는 문제 -> 함수를 새로 만드는 것은 메모리도 cpu도 많이 차지하지는 않기 때문에 그 자체만으로 부하가 걸리진 않는다. 그럼에도 한번 만든 함수를 재사용할 수 있다면 재사용 하는게 좋다. 사용법 const onChange = useCallback( e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }, [inputs] ); 이렇게 useCallback으로 감싸준다 그러면 deps에 넣은 값이 바뀔때만 함수가 새로 만들어진다. 여기서는 inputs가 바뀔때만 함수가 새로 만들어진다. 이렇게만 ..

useMemo라는 hook을 사용해서 연산된 값을 저장해놓을 수 있다. 성능최적화에 쓰인다. 참고 블로그 : 벨로퍼트 function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } 활성 사용자 수를 알게 하기 위해서 함수를 만들었다. 이 함수는 이름을 눌러서 초록색이 된 사용자만 세면 된다. 그런데 문제는 input값이 바뀔때에도 저 함수가 호출되는 것이다. input 값이 바뀔때에는 저 함수가 실행될 필요가 없다. const count = countActiveUsers(users); const count = useMemo(() => countActiveU..

1. 마운트 React.useEffect(()=>{ console.log("a"); },[]); 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다. 위와같이 두번째 파라미터로 비어있는 배열을 넣는다면 클래스형에서 ComponentDidMount()와 마찬가지로 처음에 불러올때 중괄호 안의 함수가 실행된다. 2. 언마운트 cleanup함수라고 한다. React.useEffect(()=>{ console.log("a"); return()=>{ console.log("b"); } },[]); 컴포넌트가 사라질 때 return안의 함수가 실행된다. 3. deps에 특정값 넣기 deps 에 특정 값을 넣게 된다면 아래의 상황에서 호출이 된다. 컴포넌트 처음 마운트될때 저장..

const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // = user.id 가 id 인 것을 제거함 setUsers(users.filter(user => user.id !== id)); }; users의 배열에서 user.id가 일치하지 않는 원소만 추출해서 새로운 배열을 만든다. 이것을 리덕스 모듈에서도 활용할 수 있겠다.

이제까지 리액트에서 내가 배열을 렌더링할때는 이런 경우이다. 메인페이지에서 상품 목록을 가지고 올떄 위와 같은 페이지에서 상품 하나를 컴포넌트로 만들어서 , 페이지에서 상품 정보를 가지고 있는 배열을 map돌리는 것이다. {product_list.map((p) => { return ( ); })} 여기서 map을 돌릴때 꼭 key가 있어야한다. key가 없으면 추가나 삭제가 일어날때 매우 비효율 적인 작업이 일어난다. 예를 들어 [a, b, c, d] 배열에 z를 중간에 넣어 [a, b, z, c, d]로 만들고 싶다면 c가 z로 바뀌고, d가 c로 바뀌고 d가 새로 생긴다. 그 후 a를 삭제하고 싶으면 a가 b로 바뀌고 b가 z로 , c가 d로 바뀌고 마지막에 있던 d가 사라진다. 하지만 key가 있으..