자바스크립트 - React.js
[React.js] 리액트에서 자주 쓰는 if문 작성 패턴 5개
1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 쓴다. 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능하다. if (어쩌구) {저쩌구} 이게 안된다는 소리다. 그래서 보통 return + JSX 전체를 return하는 if문을 작성해서 사용합니다. 근데 이렇게 쓰시려면 else 생략이 가능 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } else와 중괄호를 하나 없애도 아까 코드..
[React.js] 컴포넌트간 편리한 state 공유를 위한 Redux
❓ Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리입니다. 이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있다. 그래서 props 전송이 필요 없어지니 컴포넌트가 많아질 수록 좋을듯하다. ❗ Redux 설치 npm install @reduxjs/toolkit react-redux 터미널에 입력하면 된다다. redux toolkit이라는 라이브러리는 문법이 쉬워진 redux의 개선버전이다. ❗ Redux 셋팅 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) 아무데나 store.js 파일을..
[React.js] 성능개선 3 : useTransition, useDeferredValue
리액트18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 하나 추가되었다고 한다. "useTransition" 이건데 이걸로 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해준다. 사실은 코드 실행시점만 조절해주는 것임... ❗ automatic batching Batching이란 React가 더 나은 성능을 위해 여러개의 state 업데이트를 한 번의 리렌더링으로 묶어서 진행하는 것을 말한다. setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 state변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야하지만 리액트는 똑똑하게도 재렌더링을 마지막에 1회만 처리해준다. 일종의 쓸데없는 재렌더링 방지기능이고 batching이..
[React.js] 성능개선 2 : 재렌더링을 막는 memo, useMemo
❗ Memo useMemo와 memo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나이다. Memo는 Memoization을 뜻한다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. 먼저 시작하기 전에 함수형 컴포넌트에 대해 꼭 알아야 한다. 아래 예제를 보면서 같이 살펴보겠다. 함수형 컴포넌트는 렌더링 ➡️ Component 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거친다. Component가 렌더링이 될 때마다 value라는 변수가 초기화된다. 따라서 calculate 함수는 반복적으로 호출됩니다. calculate 함수가 무거운 일을 하는 함수라면 무거운 일을 반복적으로 하..
[React.js] 성능개선 1 : lazy import
❗ lazy import 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데 그게 싫다면 js 파일을 잘게 쪼개면 된다. 쪼개는 방법은 import 문법을 약간 고치면 되는데 지금 페이지에서 사용하지 않고 있는 컴포넌트들은 lazy import 해놓으면 좋다. (App.js) import {lazy, Suspense, useEffect, useState} from 'react' // lazy import 적용 전 import Detail from './routes/Detail.js' import Cart from './routes/Cart.js' // lazy import 적용 후 const Detail = lazy( () => import('./routes/Detail.js') ) const ..
[React.js] useEffect에 대하여
❓ useEffect() useEffect는 리액트 컴포넌트가 mount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있게하는 Hook이다. ❗ useEffect 셋팅 및 사용법 import { useEffect } from "react"; js파일의 상단에 import를 해주고 useEffect(() => { //기능 }) 이렇게 사용하면 된다 !!! 그러면 어떠한 컴포넌트 내에서 정의되어 있는 useEffect( )내부의 기능은 해당 컴포넌트가 mount, update시 정의한 기능이 실행된다. 예제를 가볍게 보며 실행 방법에 대해 알아보자 let [count, setCount] = useState(0); useEffect(() => { console.log("plus") }) {setCo..
[React.js] Router 라이브러리에 대해서
❓ Router 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 간단한 라이브러리이니 바로 셋팅법과 사용법 등등에 대해서 알아보자 npm install react-router-dom@6 터미널에서 해당 명령을 통해 Router를 설치하자. 그리고 src파일 안에 있는 index.js 내부의 코드에 import { BrowserRouter } from 'react-router-dom'; // add const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // add // add ); add라고 주석 처리한 세 곳에 저 코드 그대로 복붙 ! 끝. ❗ Route 기본 사용법 Router 사용법은 간단..
[React.js] CSS-in-JS (Styled-components)에 대하여
❓ CSS-in-JS CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다. ✔ CSS-in-JS의 장점 CSS의 컴포넌..