![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcwLQ98%2FbtrEIsX0vyv%2F3lpqGNudybb2DkK5zRnSyK%2Fimg.jpg)
[React] filter ()
2022. 5. 28. 03:06
개발이야기/React.js
필터 메소드를 활용하여 클릭한 것을 삭제하는 기능을 만들어보자. filter는 배열메소드로 필터링을 해서 일부내용을 걷어내고 새롭운 배열을 만들어내는 개념이다. 📌작성코드 import { useState } from "react"; import ReviewList from "./components/ReviewList"; import MockItems from "./mock.json"; const App = () => { const [items, setItems] = useState(MockItems); //초기값을 목데이터로 설정 const [order, setOrder] = useState("createdAt"); const sortedItems = items.sort((a, b) => b[order]..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbQ57Q%2FbtrEH438nOq%2FyX0KCHLRRsDVQ8nD4VKc2K%2Fimg.jpg)
[React] sort 함수를 활용한 데이터 정렬 방법과 state 연동하기
2022. 5. 26. 03:16
개발이야기/React.js
sort 함수로 정렬 바꾸기 => sort는 기본적으로 아무것도 적지않으면 오름차순을 정렬시킨다. (한글, 영어, 숫자 모두) 하지만 숫자는 1, 5, 7, 9, 10 이라는 숫자가 있을때, 컴퓨터는 10이라는 숫자를 10으로 인식하지 못한다. 첫글자만 보고 1, 10, 5, 7, 9로 정렬함. 숫자 데이터의 정렬을 만들던 중... 📌작성코드 import { useState } from "react"; import ReviewList from "./components/ReviewList"; import items from "./mock.json"; const App = () => { const [order, setOrder] = useState("createdAt"); const sortedItems =..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4fRzp%2FbtrEIrY5BGp%2FPv5vIyu7VsVXSbw5kfEvR0%2Fimg.jpg)
[React] 참조형 State
2022. 5. 24. 01:35
개발이야기/React.js
이번엔 객체와 배열에서 state를 활용해보자. 어떠한 버튼을 클릭했을때, sethistory의 state값이 변경되면서 push 메소드를 활용하여 history값 뒤에 nextNum값 들을 추가해주는 코드이다. 이때 기존에 state 활용방식처럼 setHistory(history); 로 값을 넣어주었는데, 이 방법은 사실 잘못된 방법이다. 왜 일까? import { useState } from "react"; import Dice from "./Dice"; import React from "react"; import Button from "./Button"; const random = (n) => { return Math.ceil(Math.random() * n); }; const App = () =>..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblk1X9%2FbtrEItJnmSZ%2FjpEhMCSFL1mokv2YL11dk0%2Fimg.jpg)
[React] useState Hook
2022. 5. 23. 00:33
개발이야기/React.js
useState hook 사용법을 알아보자. 예쁜 주사위 이미지가 있다. 주사위에 '버튼'을 만들어서 랜더링을 할때마다 상태 값이 변하도록 만들어볼거다. 먼저 Button.js 컴포넌트를 만들어주고 const Button = ({ text }) => { return {text}; }; export default Button; 부모 컴포넌트로 이동! import Dice from "./Dice"; import React from "react"; import Button from "./Button"; const App = () => { return ( ); }; export default App; 버튼 컴포넌트에 text라는 props를 사용하고 App.js에 props로 전달해준다. (Button 컴포넌트..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7wkt8%2FbtrEHVzCULl%2FnIZkDpx1qGuAU2lSQRSqW1%2Fimg.jpg)
[React] 라이브러리 chart 각 데이터별로 color 값 주기
2022. 5. 19. 17:48
개발이야기/React.js
📍원래의 코드 const adFormatDataGraph = { labels: adFormatData.labels, datasets: [ { labels: adFormatData.labels, data: adFormatData.data, borderWidth: 0, // 추후 옵션 설정의 값 갯수에 따라 컬러 추가 필요합니다. backgroundColor: [ 'rgba(66, 165, 245, 1)', 'rgba(102, 187, 106, 1)', 'rgba(158, 189, 178, 1)', ], }, ], }; const funnelLevelDataGraph = { labels: funnelLevelData.labels, datasets: [ { labels: funnelLevelData.label..