React
-
[React] 코드 분할과 React.lazyReact 2022. 8. 11. 16:46
코드 분할 Code-Splitting 번들링 Bundling 대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다. 코드 분할 하지만 사용자의 앱이 커지면 번들도 커지게 된다. 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 한다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다. 코드 분할은 앱을 “지연 로딩” 하게 도..
-
[React] React에서 setInterval 사용React 2022. 7. 22. 18:08
Making setInterval Declarative with React Hooks How I learned to stop worrying and love refs. overreacted.io 번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점 Dan abramov의 https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 번역입니다.All copyrights to Dan Abramovtranslated by Jake seoTHE velog.io react 프로젝트 진행 중 timer를 구현하기 위해 setInterval을 사용해야 했다. setInterval 사용 시 react에서 일어날 렌더링에 관한 이슈에..
-
[React] 제어/비제어 컴포넌트React 2022. 7. 10. 19:37
폼 엘리먼트 HTML 폼 엘리먼트(input, textrea,select)는 사용자 입력을 기반으로 폼 엘리먼트 자체의 내부 상태를 관리하고 업데이트한다. Name: 예를 들어, 위의 폼은 사용자에게 name을 입력받도록 되어있다. 대부분의 경우 폼의 제출 버튼을 클릭하게 되면 함수로 처리하기 때문에 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다. 데이터에 접근하는 방식에서 제어 컴포넌트와 비제어 컴포넌트 방식으로 나누게 된다. 제어 컴포넌트 => React에 의해 값이 제어되는 입력 폼 엘리먼트 비제어 컴포넌트 => React에 의해 값이 제어되지 않는 입력 폼 엘리먼트 제어 컴포넌트 (Controlled Component) React에 의해 값이 제어된다는 뜻은 React가 사용하는 s..
-
[React] Intersection Observer API : 무한 스크롤 구현React 2022. 7. 3. 17:25
Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.Intersection Observer API는 타겟 요소와 상위 요소 또는 developer.mozilla.org 🤔Intersection Observer API란? Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport사이의 교차점 (intersection) 내의 변화를 비동기적으로 관찰하는 방법이다. 즉, 내가 지정한 요소가 화면(뷰포트) 상에 보이고 있는지를 관찰하는 ..
-
[React] 조건부 렌더링 시 "falsy" 값 렌더링 주의React 2022. 6. 28. 15:44
문제 api로 배열 데이터를 받아와 화면에 뿌려주는 작업 중 화면에 0이 출력되어 찾아보았다. 원인 JSX 이해하기 – React A JavaScript library for building user interfaces ko.reactjs.org {props.messages.length && } 한 가지 주의해야 할 점은 0과 같은 “falsy” 값들은 React가 렌더링 한다는 점입니다. 예를 들어, 아래의 예시는 props.messages가 빈 배열일 때 예상과는 다르게 0을 출력하게 됩니다. props.messages.length가 0이면 "falsy" 값이 나오니 조건부 렌더링을 이용하면 되겠다! 라는 생각이지만 리액트는 그 값을 렌더링한다고 한다. 그래서 0이 출력하게 되었다. “falsy” 값..
-
[React] TypeError: Array.map is not a functionReact 2022. 6. 14. 14:17
TypeError: Array.map is not a function 문제 데이터 배열을 받아 map 함수로 데이터 목록을 출력하도록 하였다. 잘 동작하는 듯 하다가 특정 상황에서 해당 오류가 발생하였다. 분석 map 함수는 배열에만 동작한다. 이 오류는 해당 데이터가 배열이 아니기 때문에 나는 오류이다. 데이터를 받아오는 코드를 작성할 때도 이 사실에 주의하여 배열로 받아오겠끔 하였다. 그런데 왜 특정 경우에 이런 오류가 나는지 고민했다. 그 이유는 바로 데이터를 받는 상태의 초기값 때문이었다. 해당 프로젝트에서 상태 관리 라이브러리인 리덕스를 사용했다. 바로 데이터를 받아오는 상태의 initialState를 {}로 할당하였기 때문이었다. 해결 해당 상태의 initialState를 []로 할당하였다.