React는 현대 웹 애플리케이션 개발에 널리 사용되는 자바스크립트 라이브러리입니다. 웹 애플리케이션의 성능을 최적화하는 방법 중 하나는 리소스 파일의 크기를 줄이는 것입니다. 이 포스트에서는 React 프로젝트에서 GZIP 압축을 사용하여 성능을 향상시키는 방법에 대해 설명하겠습니다. 왜 GZIP 압축을 사용해야 하는가? 웹 애플리케이션에서 성능 최적화를 위해 GZIP 압축을 사용하면 다음과 같은 이점이 있습니다. 속도 향상: 파일 크기가 줄어들면 웹 브라우저가 빠르게 리소스를 다운로드할 수 있으며, 이로 인해 페이지 로딩 시간이 단축됩니다. 대역폭 절약: 압축된 파일을 전송함으로써 네트워크 대역폭을 절약할 수 있습니다. 이는 특히 모바일 환경에서 중요한 요소입니다. React 프로젝트에서 GZIP 압..
React-hook-form과 Material UI MUI Select Component 같이 사용 하는 방법 react-hook-form과 MUI(Material-UI)의 Select 컴포넌트 같이 사용하려고 하는 경우에는 react-hook-form과 MUI가 모두 ref를 통해서 dom을 제어하기 때문에 라이브러리들끼리 충돌해서 제대로 동작하지 않습니다. 이 경우 react-hook-form의 Controller API를 사용해주면 됩니다. react-hook-form 버젼 7 기준 Controller 컴포넌트 사용 import FormControl from "@material-ui/core/FormControl"; import InputLabel from "@material-ui/core/Inpu..
Hoc vs Render 속성 값 컴포넌트에 공통적으로 사용되는 로직을 재사용 가능하도록 구현하는 방법에는 Hoc 와 Prop render 를 사용하는 2가지 방법이 있다. 1. 컴포넌트 내부 일부에서 적용하는 경우 HOC 현재 컴포넌트의 전체에 적용 //HOC //로그인시에만 렌더링하는 HOC const WithIsLogin = WrappedComponent => class WithIsLogin extends Component { state = { isLogin : false } checkIsLogin = ()=> { /***/ } componentDidMount(){ this.setState({ isLogin : this.checkIsLogin() }) } render(){ if(this.state...
