본문 바로가기

javaScript

[React] Recharts 라이브러리 리액트에서 그래프형 차트를 만들 때 사용할 수 있는 라이브러리다 대표적으로 사용하는 차트 라이브러리는 Recharts와 Chart.js가 양대 산맥인 듯하다 Recharts는 값 변경이 매우 직관적이고 간단하게 차트를 불러올 수 있다는 점에서 조금 더 애용하는 듯하다 Installation NPM # latest stable $ npm install recharts 터미널을 켜고 npm 설치를 진행한다 테스트용으로 app.js에 코드를 만들어도 확인하고 시작하는 것도 좋다 import { LineChart, Line } from 'recharts'; const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...]; const renderLineCha.. 더보기
[React] 이중map react에서 대부분의 UI를 구현할 때 map() 함수를 자주 사용한다 사실 거의 반 필수로 사용하는거 같은데 데이터가 배열 객체 형태로만 존재할 경우 쉽게 데이터를 가져올 수 있다 하지만 점점 데이터의 형태가 복잡해진다면 한번의 map으로 내가 원하는 데이터를 가져올 수 없다 예시를 통해 알아본다 map()을 활용하기 위한 데이터 만들기 const productData = [ { id: 1, name: '블랙 셔츠', }, { id: 2, name: '하얀 반팔티', }, { id: 3, name: '파란 에어리즘', } ]; 상품 데이터라는 배열안에 상품 한 개에 해당하는 객체가 존재한다 여기서 이 객체는 배열의 인덱스[0], [1], [2]에 해당한다고 볼 수 있다 이 상품 전부의 name이 필요.. 더보기
[React] Styled-component 사용법 (이미지 넣는 법) 스타일드 컴포넌트를 사용하기 전 알고 있어야 하는 개념이 있다 CSS in JS 스타일을 정의 할 때 CSS파일이 아닌 Javascript로 작성된 컴포넌트에 삽입하는 스타일 기법이다 Sass와 같은 CSS 전처리기가 등장했음에도 자바스크립트의 상태 값을 공유할 수 없어서 동적으로 스타일링을 하기 위해서는 인라인 스타일을 이용하거나 css 클래스 명으로 조건부 스타일링을 이용하는 방식으로 사용하였다 이러한 문제를 해결 하기 위해 등장한 패러다임이 CSS in JS이다 설치 $ npm install styled-components 스타일드 컴포넌트는 스타일링을 할 때 ES6 템플릿 리터럴 문법을 이용하여 JS파일 안에 선언해서 사용한다 import React from 'react'; import style.. 더보기
[React] usePrams() 사용법 usePrams는 url의 파라미터의 값을 가져올 수 있는 라우터 hook 예를 상품 페이지를 랜더링 할 때 사용할 수 있다 pruduct/3이라는 url 주소가 있다 usePrams 사용법을 알아보자 import { useParams } from "react-router-dom"; 먼저 useParams를 import 해온다 const params = useParams(); 변수에 useParams를 담는다 Route.js product/에 :id 주소를 params로 가져올 수 있다 이제 URL 주소에 따라 페이지를 동적으로 보여주고 싶다고 하면 URL을 받는 코드에 템플릿 리터럴을 사용하여 보여주면 된다 더보기
[React] class동적으로 구현하기 react에서 CSS의 class를 동적으로 주는 방법을 알아보자 예제) App.js function App() { return ( Color ); } App.css .App { text-align: center; } .container { width: 500px; height: 200px; background-color: royalblue; font-size: 50px; color: #fff; } .red { background-color: red; } 동적으로 구현하려면 className에 조건을 주어야 한다 조건을 주려면 가장 간단한 방법은 빈 state주어 true와 false값으로 on off 방식을 주는 것 function App() { const [onOff, setOnoff] = useSt.. 더보기
[React] Component화 활용하기 무분별하게 component를 쪼개면 나중에 데이터를 받아왔을 때 데이터를 활용하기 까다롭다 예를 들어 최상위 컴포넌트에서 데이터를 받아왔다고 하자 사이즈 컴포넌트가 있고 색상 컴포넌트도 있고 이렇게 있다고 한다면 보통 color에 관한 컴포넌트를 하나 만들고 size에 관한 컴포넌트를 하나 만든다 하지만 데이터를 같이 공유하고 있고 그 데이터를 나중에 백엔드 쪽으로 넘겨줘야 한다면 이 두 개의 컴포넌트는 자식 컴포넌트가 되어 최상위 컴포넌트에 있는 데이터를 자식 컴포넌트에 내려줘야 하기에 이 과정에서 데이터를 주고받는 게 복잡해질 수 있기 때문에 하나의 컴포넌트로 활용하는 게 좋은 방법 일 수 있다 더보기
[React] monster 컴포넌트 연습! 부트캠프 수강 중 컴포넌트를 연습할 수 있는 monster 사이트를 정리해본다 1. API 주소: https://jsonplaceholder.typicode.com/users 위 주소를 호출하여 데이터 로딩을 처리해주세요! - useEffect() - fetch - setState (monsters 에 저장) 먼저 fetch함수를 사용하여 API를 호출하여 데이터 로딩이 잘 되는지 확인한다 fetch('https://jsonplaceholder.typicode.com/users', { method: "GET" }) .then((res) => res.json()) .then((data) => { console.log(data) }) API주소를 통해 데이터 로딩이 잘 불러와졌다 콘솔 로그 무조건 자주 찍어.. 더보기
[React] react 구조분해 할당? 연습도 할 겸 react 파일 하나 만들고 시작한다 card형식의 컴포넌트 하나 만들어서 더미 데이터 하나 뚝딱 만들고 내가 했던 대로 한다면 이렇게 function App() { let [movie, setMovie] = useState(cardData) return ( { movie.map((elm, index) => { return ( {movie[index].movieTitle} {movie[index].movieRanking} ) }) } ); } cardData.js let cardData = [ { movieId: 1, movieImage: 1, movieTitle: "버즈 라이트이어", movieRanking: "Top 1" }, { movieId: 2, movieImage: 2, movi.. 더보기

티스토리툴바