4전 4전

useMemo()는 리액트에서 최적화를 위해 사용되는 훅(Hook)이라고 합니다. 메모이제이션을 하는데 이는 함수형 컴포넌트에서 반복되는 계산 값을 캐싱하여 재사용하도록 해줍니다. | useMemo() 함수형 컴포넌트는 말 그대로 함수고, 함수는 다시 호출되면 함수 내부 변수가 초기화됩니다. 따라서 함수형 컴포넌트가 렌더링이 되는 것은 함수가 다시 호출되는 것이고, 해당 컴포넌트의 값도 초기화되는 거라고 할 수 있습니다. function App() { // 대충 오래걸리는 함수 const 오래걸리는함수 = () => { console.log('렌더링 됨'); return 10; }; const value = 오래걸리는함수(); // 렌더링 될때마다 초기화 return 값: {value}; } useMem..

리액트에서는 컴포던트 간에 state를 공유하려면 props로 전달해 주어야 사용할 수 있습니다. 따라서 상위 컴포넌트에 있는 state를 하위컴포넌트에서 사용하려면 props로 전달해 줘야 합니다. 이때 연결되어 있는 하위 컴포넌트들이 많아지면 props로 계속 전달해 줘야 하기 때문에 state의 관리가 어렵고 코드가 복잡해질 수 있습니다. React Redux는 state를 외부 파일에서 관리하고, props 없이 state를 공유하고 관리할 수 있도록 해줍니다. Redux는 리액트뿐만 아니라 다른 곳에서도 사용할 수 있지만 여기서는 리액트에서 사용하기 위해 React Redux를 연습해 보겠습니다. | React Redux 사용 먼저 React Redux를 설치해 보겠습니다. npm install..

웹페이지에서 데이터를 보여줄 때 많은 양의 데이터를 한 번에 가져와서 보여주는 것이 아닌 페이지를 나눠서 보여주는 것을 페이지네이션이라고 합니다. 먼저 리액트 폴더를 만들어 보겠습니다. npx create-react-app pagenation 그다음 api를 직접 만들어야 하나 생각했는데 다행히 저 같은 사람을 위한 api가 있어서 사용하기로 했습니다. 구글에 fake api라고 검색하고 DummyJSON - Fake REST API of JSON data for development DummyJSON - Fake REST API of JSON data for development Got tired of Lorem ipsum data? With FakeProductsAPI, what you get is ..

| 변경 리액트에서 state변수 안에 있는 객체를 변경할 때 그 변수에 객체를 직접 변경하면 안 됩니다. import { useState } from 'react'; export default function App() { const [user, setUser] = useState({ name: "Kim", age: 20 }); return ( 이름: {user.name} 나이: {user.age} { user.name = "Lee"; user.age = 30; }}>변경 ); } 여기에서 { user.name = "Lee"; user.age = 30; }}>변경 이런 식으로 직접 변경하면 리액트에서는 객체가 변경되었다는 것을 인지를 못합니다. 그래서 상태의 변화를 렌더링 하고 싶으면 setUser를 ..

State는 상호작용의 결과로 화면의 결과나 상태가 변하는 동적인 값이라고 합니다. | useState 리액트에서는 useState를 사용하여 동적인 값을 나타낼 수 있고 import { useState } from "react"; 이런 식으로 import 해 온다음 사용하면 됩니다. 값을 저장하려면 const [count, setCount] = useState(0); 이런 식으로 사용하면 되는데 여기서 앞에 있는 count는 변수 명이고 setCount는 변수의 값을 바꿀 수 있는 함수입니다. import { useState } from 'react'; export default function Counting() { const [count, setCount] = useState(0); function..

| 이벤트 핸들러 리액트에서 이벤트핸들러를 JSX에 추가할 수 있습니다. 이벤트 핸들러는 클릭, 마우스 호버링, 폼 입력 등과 같은 상호작용에 따라 동작하도록 하는 기능입니다. export default function Button() { function handleClick() { console.log('클릭됨'); } return ( 클릭 ); } 이런 식으로 먼저 동작에 대한 함수를 정의해 준 다음 에 onClick={handleClick}를 추가해 주면 됩니다. 보통 함수 이름은 "handle"로 시작하고 뒤에 사용하는 이벤트를 적어준다고 합니다. onClick={handleClick}, onMouseEnter={handleMouseEnter} 이런 식으로 하면 됩니다. 또한 JSX에서 이벤트 핸..

자바스크립트에서 순수함수는 오직 단순한 계산과 같은 동작만 하도록 만들어지는 함수입니다. 리액트에서 컴포넌트를 순수함수로 만들면 버그와 예측할 수 없는 동작을 방지할 수 있다고 합니다. | 순수함수 순수함수는 y=2x와 같은 하나의 값을 넘기면 항상 같은 값을 반환하는 함수들을 말합니다. function double(num) { return 2 * num; } 위와 같은 double 함수가 순수 함수에 속합니다. 리액트 이러한 개념들로 디자인되었고 내가 작성한 모든 함수들을 순수함수라고 가정한다고 합니다. | 컴포넌트의 순수성 function Sum({ num }) { return ( 2 + {num} = {2 + num} ); } export default function App() { return (..

리액트에서 map(), filter()를 사용하여 배열의 있는 데이터들 모두 렌더링 하거나 특정 조건에 맞는 데이터만 렌더링 할 수 있습니다. | map() map() 함수를 사용하여 배열의 모든 데이터들을 한 번에 렌더링 할 수 있습니다. 아래와 같은 데이터가 있다고 하면 const items = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }, ]; 위 배열을 사용하여 리스트 형식으로 렌더링 하고 싶으면 { itmes.map((v, i) => { return {item.name} }) } 이런 식으로 사용하면 배열을 돌면서 각 데이터들의 정보를 렌더링 해줍니다. | filter() filter()를 사용하..