리액트 (12) 썸네일형 리스트형 react & styled-components로 스크롤 꾸미기 웹 사이트에서 왠만해서는 스크롤 기능을 넣지 않으려고 했다. 스크롤이 계속 남으면 거슬리기도 하고 제대로 꾸미지 않으면 사용자는 내용이 짤린 영역을 어떻게 봐야될지 모를 수도 있다. (경험담..ㅠㅠ) 그래서 간단하지만 스크롤에 대해서 정리해보면서 어떻게 꾸몄는지 정리를 해보려고 한다. 1. 스크롤바 스타일에 관한 웹 표준은 존재하지 않는다. 다만, webkit에 한해서 가상요소를 사용하여 스타일을 적용할 수 있다. https://caniuse.com/?search=-webkit-scrollbar 우선 스크롤을 다루기 위해서 아래와 같은 요소를 신경써주면 좋다. (참고: 가상 요소는 이것 보다 더 있다.) ::webkit-scrollbar: 스크롤바 전체 ::webkit-scrollbar-thumb: 스크.. prop drilling (프로퍼티 내리꽂기) The Pure React Way -> state를 관리할 때 장점: 명시적으로 작성하면 코드를 실행하지 않고도 정적으로 따라가는 것으로 어디서 사용하는지 쉽게 파악할 수 있고 수정도 간단하게 할 수 있다. 단점: 누구든 데이터가 어디서 초기화되고 갱신되며 사용되는지 판단하기 쉽지 않은 상황에 마주한다. 일부 데이터의 자료형을 바꾸게 되는 경우 (예: {user: {name: 'Joe West'}}-> {user: {firstName: 'Joe', lastName: 'West'}}) 필요보다 많은 프로퍼티를 전달하다가 컴포넌트를 분리하는 과정에서 필요 없는 프로퍼티가 계속 남는 경우 필요보다 적은 프로퍼티를 전달하면서 동시에 defaultProps를 과용한 결과로 필요한 프로퍼티가 전달되지 않은 상황을 .. ref로 HTML Element 접근/제어 React로 웹 애플리케이션을 개발하다 보면 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요. prop인 ref을 이용할 수 있습니다. current 속성을 갖는 특정 형태의 객체만을 할당할 수 있는데 클래스 기반 컴포넌트에서는 React.createRef() 함수를, 함수형 기반 컴포넌트에서는 useRef() 훅 함수를 사용하여 이 객체를 생성할 수 있습니다. 아래 코드는 useRef를 이용한 예입니다. import React, { useRef } from "react"; function Field() { const inputRef = useRef(null); function handleFocus() { inputRef.current.d.. Invalid Hook Call Warning Hooks can only be called inside the body of a function component. 개발자 툴에서 확인된 오류 메시지였는데 아래와 같은 이유로 발생한다고 React 공식 홈페이지에서 확인했다. 1. React와 ReactDOM의 버전이 일치하지 않는다. 2. Hooks 규칙을 위반했다. 3. 같은 앱에 React가 한 개 이상있을 수 있다. React와 ReactDOM의 버전 불일치인가? packag.json에서 확인했는데 react와 react-dom 버전은 동일 했다. 또 다른 확인 방법은 npm ls react 또는 npm ls react-dom 명령어로 확인 할 수 있다. 해당 이미지는 명령어 입력 후 얻은 결과물 중 하나인데 현재 리액트 버전때문에 react-r.. ReactDOM.render & ReactDOM.createRoot // Legacy root API ReactDOM.render(, document.getElementById("root")) // New root API const root = ReactDOM.createRoot(document.getElementById("root")) root.render() 차이가 뭘까? state나 props 변화가 있을 때, Legacy API는 변수 container가 변경되지 않더라도 계속 렌더링할 때 container를 전달해야 한다. import * as ReactDOM from 'react-dom'; import App from 'App'; const container = document.getElementById('app'); // Initial render. Reac.. Set up Airbnb Style Airbnb Style이란? Airbnb Style 가이드는 양질의 코드를 생성하기 위해 사용되는 말 그대로 스타일 가이드 입니다. Airbnb React/JSX Style Guide의 자세한 내용은 깃헙 레파지토리에서 참고했습니다. https://github.com/airbnb/javascript/tree/master/react#basic-rules airbnb/javascript JavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub. github.com eslint를 먼저 설치해줍니다. npm install eslint --save -dev eslint 환경 설정을 빠르게 쉽.. Lazy Loading 코드 분할 (code splitting)이 나온 배경 -> 프로젝트 규모가 커질수록 자바스크립트 파일 용량이 커짐에 따라 페이지 로딩 속도가 느려진다. -> 코드 분할을 하게되면 지금 당장 필요한 코드가 아니라면 따로 분리시켜 필요할 때 가져다 사용 할 수 있다. webpack, @babel/plugin-syntax-dynamic-import, loadable-components 이용한 방법 -> .babelrc 에서 플러그인 하기 { "presets": [ "@babel/env", "@babel/react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import" ] } 일부러 지연 시간.. 개발 환경 설정 웹팩과 바벨을 이용한 초기 셋팅 선택한 이유: Create-React-App(CRA)는 싱글 페이지 애플리케이션이다. 한번만 리소스를 로딩하는 SPA의 렌더링 방식으로 기본적으로 웹팩 및 바벨 설정 등이 숨겨져 있다. 하지만 사용하지 않는 기능 또한 모두 포함되어 있기에 원치 않는 용량과 패키지가 존재한다. 결론: compile 속도가 빠름, CRA와 비교 시 용량과 패키지 수가 적음. packages 상세 설명 webpack 개발한 app을 webpack으로 번들링할 수 있도록 허용해주는 역할 webpack-cli command line에서 webpack을 사용 할 수 있도록 도와주는 역할 webpack-dev-server 수동으로 페이지를 새로 고치지 않고도 변경 사항을 볼 수 있도록 웹 페이지를 실.. 이전 1 2 다음
