React

이번에는 리액트에서 게시글의 리스트처럼 반복문을 어떻게 구현하는지에 대한 내용이다. 일단 반복문은 자바스크립트 내장 함수인 map()을 이용해서 구현할 수 있는데 array뒤에 붙여서 사용이 가능하다.import './App.css';import {useState} from 'react';function App() { let [lang] = useState(['React', 'JSX', 'HTML', 'CSS']); return ( ReactBlog { lang.map(function(a, i) { return ( {lang[i]} 2024/06/11 ..

리액트에서 HTML태그를 분리하고 싶거나 자주 사용하는 태그들을 반복적으로 하나의 HTML로 보여주기 코드가 좀 더럽다(?) 싶으면 컴포넌트라는 것을 사용할 수 있다. 예시 코드는 아래처럼 쓸 수 있다.import './App.css';import { useState } from 'react';function App() { let [list, setList] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']); return ( ReactBlog {list[0]} 2월 17일 발행 {list[1]} 2월 17일 발행 ..

리액트에서 데이터를 저장하는 방법은 let data = '데이터'; 이런식으로 저장도 가능하지만 state라는 것을 이용해서 데이터 저장도 가능하다.import './App.css';import { useState } from 'react';function App() { let data = '블로그'; // 이렇게도 데이터 저장 가능 let [a, b] = useState('남자 코트 추천'); return ( ReactBlog {a} 2월 17일 발행 )}export default App; 위의 코드에서 '남자 코트 추천' 이라는 데이터를 state를 사용해서 데이터 저장을 하였는데, 일단 useSta..

리액트는 JSX를 사용한다. JSX란 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 문법이다. JSX를 사용하면 자바스크립트에서 HTML문법을 사용할 수 있게 된다. 1️⃣ class 넣을 땐 className으로import './App.css';function App() { return ( hello world );}export default App; 2️⃣ 변수를 넣을 때는 중괄호import './App.css';function App() { let data = 'hello world'; return ( {data} );}export default App; 3️⃣ style 넣을 땐 style={{스타일명:'값'}}impor..

일단 리액트를 올리기 위해서 node를 설치해야 하는데 설치는 아래 링크에서 하면 된다.https://nodejs.org/en/download/prebuilt-installer Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 설치가 완료되면 터미널을 열고 node --version 명령어로 설치된 노드 버전 확인 가능하다. 노드가 설치되었으면 vscode를 열고 터미널을 킨 다음 아래 사진과 같이 명령어를 입력한다.npx create-react-app [프로젝트명]  처음 설치는 시간이 조금 걸린다. 설치가 다 끝나면 왼쪽에 파일이랑 디렉토리가 생성된 것을 ..