리액트
-
[React] 코드 분할과 React.lazyReact 2022. 8. 11. 16:46
코드 분할 Code-Splitting 번들링 Bundling 대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다. 코드 분할 하지만 사용자의 앱이 커지면 번들도 커지게 된다. 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 한다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다. 코드 분할은 앱을 “지연 로딩” 하게 도..
-
[React] 제어/비제어 컴포넌트React 2022. 7. 10. 19:37
폼 엘리먼트 HTML 폼 엘리먼트(input, textrea,select)는 사용자 입력을 기반으로 폼 엘리먼트 자체의 내부 상태를 관리하고 업데이트한다. Name: 예를 들어, 위의 폼은 사용자에게 name을 입력받도록 되어있다. 대부분의 경우 폼의 제출 버튼을 클릭하게 되면 함수로 처리하기 때문에 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다. 데이터에 접근하는 방식에서 제어 컴포넌트와 비제어 컴포넌트 방식으로 나누게 된다. 제어 컴포넌트 => React에 의해 값이 제어되는 입력 폼 엘리먼트 비제어 컴포넌트 => React에 의해 값이 제어되지 않는 입력 폼 엘리먼트 제어 컴포넌트 (Controlled Component) React에 의해 값이 제어된다는 뜻은 React가 사용하는 s..
-
[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” 값..