React11 [React] React hooks(useMemo,useContext,useReducer)의 개념 및 사용방법 이번 포스팅에서는 React hooks의 세가지를 알아보겠습니다. 1. useMemo 2. useContext 3. useReducer 1. useMemo `useMemo`는 React hooks중 하나로, 계산비용이 많이 드는 함수의 결과값을 기억하고, 재사용할수 있도록 해줍니다. 이를 통해 성능 최적화를 할 수 있습니다. 즉, 계산비용이 많이 드는 함수를 `메모이제이션`하여 이전에 계산된 결과를 캐시하고, 같은 인자로 호출될때 이전에 계산된 결과를 재사용합니다. function Component(){ const value = calculate() return {value} } function calculate(){ return 10 } 위의 코드를 보면 , Component가 랜더링 될때마다 valu.. 2023. 3. 13. [React] react-router-dom 정의 및 사용법 이번 포스팅은 react-router-dom을 소개하겠습니다. 1. react-router-dom ? React에서 브라우저의 URL 경로를 기반으로 컴포넌트를 랜더링하고 관리하는 라이브러리 입니다. 이를통해 SPA(Single Page Application) 의 라우팅을 쉽게 구현할수 있습니다. react-router-dom에서 가장 중요한 컴포넌트는 1-1 ) `BrowserRouter`입니다. BrowserRouter는 브라우저의 URL 경로에 대한 정보를 React에 전달하고, 애플리케이션의 최상위 컴포넌트로 사용됩니다. ( 예제를 보시면 이해가 되실겁니다 ) BrowserRouter 컴포넌트를 사용하여 라우팅을 구현하려면 `Route` 컴포넌트를 사용해야합니다. Route 컴포넌트는 경로와 컴포.. 2023. 3. 13. [React] Create-react-app 개념 및 설치방법 이번포스팅에서는 CRA(create-react-app)을 알아보겠습니다. - CRA ? create-react-app은 Facebook에서 제공하는 공식 CLI(Command Line Interface) 도구로서, React 프로젝트를 쉽게 생성하고 구성할 수 있도록 도와주는 도구입니다. 이를 사용하여 개발자들은 React 애플리케이션을 빠르게 구성하고 실행할 수 있습니다. create-react-app을 사용하면 초기 설정과 구성에 드는 시간과 노력을 줄일 수 있습니다! 이전 포스팅에서 보셨다 싶이 babel , webpack 설정들 정말 설정들이 많았는데 이 모든설정들을 자동으로 생성하고 관리할수 있습니다... CRA는 몇가지 특성을 가지고있습니다 ( 글로 풀어서 장점을 몇가지 더 설명해드리겠습니다 .. 2023. 3. 13. [React] React에서 CSS 처리방법 이번포스팅은 React에서 CSS 처리방법 몇가지에대해 간단하게 알아보겠습니다. 1.인라인 스타일 적용 2. CSS styling 작성, Component에서 css파일 import 3. css-module 4. styled-component ※ 우선 create-react-app으로 설치한 react프로젝트인 경우 css-loader, style-loader를 따로 설치하지 않아도 webpack에서 사용하는 css 설정을 사용할 수 있습니다 - css-loader : @import, url() 등의 구문을 해석, 적용해 준다. - style-loader : 태그를 통해서 CSS를 DOM에 적용해 준다. 1. 인라인 스타일 적용 - html 태그 안에 직접 입력하는 방법 style={ } 형식으로 입력하.. 2023. 3. 3. 이전 1 2 3 다음
