프로그래밍 언어/React
[React] CSS를 적용하는 여러 방법
React는 다양한 라이브러리의 조합으로 생산성이 높아지는 자바스크립트 라이브러리이다. 따라서 스타일을 적용하는 방법에도 기존의 import를 사용하는 것 이외에 라이브러리를 사용하는 다양한 방법이 있다. Import 가장 기본이 되는 방법으로 Component에서 css파일을 바로 import // App.js import "styles.css"; const App = () => { return( ... ); } 가장 간단한 방법이기 때문에 적용하기는 쉽지만, 그만한 단점이 존재한다. 어플리케이션의 규모가 작은 경우에는 큰 영향이 없지만, 규모가 커질수록 컴포넌트가 많아진다. 그렇게 되면 css 파일을 관리하기도 어려워지며, 여러 컴포넌트에서 사용한 Class Name에도 중복이 발생할 수 있다. 그로..
[React] className
classnames? classnames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리이다. 또한, CSS Module을 사용할 때 이 라이브러리를 사용하면 여러 클래스를 적용할 때 매우 편리하다. 라이브러리이기 때문에 설치가 필요하다. $ yarn add classnames classnames 간략 사용법 import classNames from ‘classnames’; classNames(‘one’, ‘two’); // = ‘one two‘ classNames(‘one’, { two: true }); // = ‘one two‘ classNames(‘one’, { two: false }); // = ‘one‘ classNames(‘one’, [‘two’, ‘three’]); // = ‘o..
[React] 리스트 List
const numbers = [1, 2, 3, 4]; const exponentialNumbers = numbers.map(function (number) { return number * number; }); console.log(exponentialNumbers); // [1, 4, 9, 16] src/App.jsx import * as React from 'react'; const list = [ { title: 'React', url: 'https://reactjs.org/', author: 'Jordan Walke', num_comments: 3, points: 4, objectID: 0, }, { title: 'Redux', url: 'https://redux.js.org/', author: '..
[React] 리액트 .js vs .jsx 차이점
정의 jsx는 JavaScript 확장 문법 JavaScript안에서 HTML 사용 가능 jsx 사용이 필수는 아니지만 추천 (리액트 공식 홈페이지 - 문서 - JSX 소개 탭) 기능적인 차이는 없으나 팀 내 협의의 문제 .jsx란? JSX는 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법이다. 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는 점이고 주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능하다. // jsx const element = Hello, world!; .js vs .jsx // JS class Hello extends React.Component { render() { return React.createElement("div", n..
[React] 다양한 방법으로 Hello World 띄우기
App.jsx 파일 내 수정 import * as React from 'react'; const title = 'World'; function App() { return ( Hello {title} ); } export default App; 검색창 띄우기 import * as React from 'react'; const title = 'World'; function App() { return ( Hello {title} // 여긴 검색창 띄우기 용도 Search: ); } export default App; 리액트 구조) 코드 > 내부 작업 > 브라우저에 띄 아래는 구조체 사용 import * as React from 'react'; const welcome = { greeting: 'Hey', ti..
[React] Hello React 띄우기
App.jsx 전 코드 import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( Vite + React setCount((count) => count + 1)}> count is {count} Edit src/App.jsx and save to test HMR Click on the Vite and React logos to learn more ) } export default App 아래와 같이 변경 import * as..
[React] 설치 방법
우선 Node.js를 설치해준다 다운로드 | Node.js (nodejs.org) 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org cmd에서 다음과 같이 기입, 사용자 권한 x // 여기서 first-project은 폴더명임, \C:/Users/사용자 명칭/ < 이 경로로 들어감 npm create vite@latest first-project -- --template react 그 뒤 다음과 같이 순차적으로 기입 cd hacker-stories npm install npm run dev 결과