4전 4전

자바스크립트에서 특정값으로 끝나는지 아니면 특정값으로 시작하는지 확인할 수 있는 메서드가 있습니다. | endsWith() endsWidth는 특정값으로 끝나는지 확인할 수 있는 메서드입니다. 1. 문법 endsWidth() 메서드는 매개변수 2가지를 집어넣을 수 있습니다. string.endsWith(searchString, length) 여기서 serchString은 확인하고자 하는 특정 문자열, length는 찾으려고 하는 문자열의 길이입니다. length는 안 넣어도 되고 기본값은 문자열 전체 길이의 값입니다. 2. 사용 console.log("apple".endsWith("e")); // apple이 e로 끝나므로 true console.log("apple".endsWith("l")); // a..

웹페이지에서 데이터를 보여줄 때 많은 양의 데이터를 한 번에 가져와서 보여주는 것이 아닌 페이지를 나눠서 보여주는 것을 페이지네이션이라고 합니다. 먼저 리액트 폴더를 만들어 보겠습니다. 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()를 사용하..

리액트에서 컴포넌트를 만들고 다른 곳에서 사용하려면 컴포넌트를 export 하고 사용하려고 하는 파일에서 컴포넌트를 import 해야 됩니다. | Default 컴포넌트를 export 하는 방법에 default로 하는 방법이 있는데 이는 하나의 파일에서 하나의 컴포넌트를 보내고 싶을 때 사용하면 됩니다. 1. export export default 키워드를 사용하면 됩니다. export default function MyComponent() { return Hello, World!; } OR function MyComponent() { return Hello, World!; } export default MyComponent; 2. import import를 하려면 import키워드를 사용해 다른 파일에..