Web/React (15) 썸네일형 리스트형 [React] Form에서 데이터 전송 후 input 초기화 - Form을 submit 한 후 초기화를 submit안에서 해주면 서버에서 오류시 글이 전달되지 않았으나 사용자의 글이 지워지기 때문에 문제가 될 소지가 있음 - useEffect에서 redux에서 post가 성공하였을때 실행되는 변수( signInDone과 같은)를 받아 데이터 전송 성공시 초기화가 되도록 해야 함 [React] component로 빼면 좋은 것들 - 큰 부분으로 되어 있는 부분 - map안에 들어가는 JSX - component를 미리 작성해놓고 설계하는것이 편리하다 [React] 비 효율적인 Render 막기 비 효율적인 렌더링을 막는 방법 1. 컴포넌트들을 분리해라 2. 말단 컴포넌트들은 memo로 감싸라 3. 연산이 많은 함수의 경우 useMemo로 cashing되도록 해라. memo : 부모 컴포넌트들이 리렌더링 될때 memo를 자식에 감싸면 props가 바뀌지 않는 한 렌더링되지 않는다. useMemo : hooks안에서 개별 값을 cashing하고 싶다면 사용, cashing을 갱신해야되는 데이터의 경우 deps에 넣어라. [React] 유용한 API 및 라이브러리 날짜 커스텀 momentjs date-fns dayjs luxon 스크롤바 커스텀 react-custom-scrollbars 사용자 해시태그 mention [React] Websocket npm i socket.io-client - socket은 연결해 놓으면 전역적인 특징을 띄기에 하나의 컴포넌트에 연결 후 다른 컴포넌트에 가면 연결이 끊어 질 수 있다. 그러므로, 컴포넌트에 종속적으로 연결해놓으면 컴포넌트가 사라질 경우 연결이 끊어질 위험성이 있으므로 그걸 방지하기 위하여 공통 된 컴포넌트에 연결해야 한다. - hook에 socket을 연결하면 해결된다. 컴포넌트간의 공통적인 일을 수행해야 할 경우는 부모 컴포넌트에 선언을 하는 것도 좋으나, view가 들어가지 않는 경우에는 hook에서 처리하면 된다. - socket.io의 경우에 socket을 지원하지 않는 브라우저도 있기에 http로 먼저 요청을 보낸 후 socket을 지원하는 브라우저일 경우 socket.io로 전환하여 보낸다.. [React] useRef useRef는 특정 DOM을 직접 선택하여 사용 할 수 있게 해주는 hook이다. React 개발 시 DOM을 직접 선택하여 작업을 해야 할 경우( element 크기, scroll 위치, focus 등) 사용 할 수 있다. useRef를 통하여 접근하고자하는 tag에 ref값에 넣어준다. ref.current로 선언을 하면 선언 된 tag의 DOM을 가르키게 되어 DOM을 직접 컨트롤 할 수 있게된다. [React] useSWR - SWR과 같이 실시간으로 데이터 관리가 가능 할 경우 props로 데이터를 넘길 필요가 없다 - props를 사용 할 경우 자식이 re-render 되므로 memo와 같이 신경쓸 부분이 있었으나 props를 사용하지 않는 시점에서는 component별로 따로 render가 되기 때문에 신경을 쓰지 않아도 된다 - [] ( deps)에는 외부에서 쓰이는데 바뀌는 값들에 대해서는 넣어주어야 한다 - 항상 SWR을 사용해야 좋은것은 아니다. 재사용 할 컴포넌트의 경우 안에 SWR을 무작정 넣기보다 props로 부모로부터 값을 받아 재사용성을 할 수 있도록 설계하는것이 좋다. [React] 로그인 / 회원가입 ★ React-router에서는 말고 를 써야 한다. 사용시 페이지 새로고침이 일어나므로 화면만 변경되고 데이터 변경이 없는 를 사용해야 한다. ★ front / back-end를 localhost로 사용할때는 로그인 된 정보를 메모리에 저장하고 있기 때문에 서버를 재시작해야 로그인 정보가 없어짐 ★ back-end를 끄기 힘든 상황이면 front에서 application에 들어가서 cookie를 로그인 정보를 삭제 ★ webpack-dev-server에서 proxy 옵션을 사용하여 fake localhost 주소를 만들어 cors 문제를 해결 할 수 있음 ★ front 개발자가 로그인 성공을 알 수 있는 데이터는 응답으로 온 데이터의 유/무, 로그인시에는 데이터를 front에서 저장하고 있고 로그아웃시.. [React] http 비동기 요청 - 비동기요청을 무조건 redux에서 처리하는 것이 아닌 component 내에서만 쓰이는 비동기 처리의 경우는 component내에서 코딩하여 처리하는것이 코드가 간결해짐 - React에서 보통 비동기요청은 axios를 사용 - 보통 back-end 개발자가 API list를 주면 그에 맞춰 개발을 한다 - cors, localhost 주소가 다를 경우 나올수 있는 error, back-end쪽에서 서버 포트가 달라도 받을수 있도록 설정을 하거나 webpack dev server에서 proxy를 설정하여 해결 할 수 있다 - error 데이터는 error.response.data로 응답이 온다 - 비동기 요청의 안에서 쓰이는 setState의 경우 함수 초기에 초기화를 따로 해주는 것이 좋다. 요청을 .. [React] 커스텀 훅 및 useCallback Custom hook을 사용하여 hook을 custom 할 수 있다 Single Page Application에서 쓰이는 tag의 경우 submit 동작 시 e.preventDefault()를 필수로 추가해야한다. useCallback은 사용시 함수를 기억하기에 배열 요소에 바뀌는 값들을 꼭 추가해줘야 한다. - 매번 함수 component가 render시 함수가 새로 생성되며 함수를 포함한 자식 component도 계속해서 render 됨 - re-render가 발생해도 실제로 화면을 계속 그리는건 아니지만 비교검사를 하기 때문에 사용자 경험에 영향을 미침 - useCallback 배열 요소에는 함수를 기준으로 외부 변수에서 바뀌는 값이면 적어주고 내부 변수일 경우는 적지 않아도 됨 / 순수함수일 경우.. 이전 1 2 다음
