728x90 프로그래밍 언어/JavaScript4 [JS React] 컴포넌트 활용하기 아래와 같이 반복되는 코드들이 있다면 어떨까요? 지속적으로 작성하기에 비효율적이지 않을까요? 그럴때 컴포넌트를 사용하면 됩니다.import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { let [pageName, pageNameChange] = useState(['리액트 공부를 위한 페이지', 'HTML 공부를 위한 페이지', 'CSS 공부를 위한 페이지']); return ( {pageName[0]} 설명 설명 설명 {pageName[1]} 설명 설명 설명 {pageName[2]} 설명 설명 설명 );}export.. 2024. 10. 21. [JS React] state 활용하기 리액트로 프로젝트를 제작하다보면 동적으로 텍스트 등을 변경해야할 일이 생기게 됩니다. 일반적인 변수를 사용했을때 변경 되지 않기에, 동적으로 변환이 가능한 state를 사용합니다. 선언할땐 아래와 같이 선언합니다. pageName은 get, pageNameChange는 set이라고 생각하면 됩니다. let [pageName, pageNameChange] = useState('리액트 공부를 위한 페이지'); 활용하면 동적으로 텍스트를 변경 할 수 있는 간단한 기능을 만들 수 있습니다. import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { let [pageName, pageNa.. 2024. 10. 21. [JS React] JSX 문법 알아보기 리액트를 설치하면 아래와 같은 코드들이 나와 있을 것이다. 그럼 HTML과는 다른 점을 찾을 수 있을 것이다. class가 아닌 'className'을 사용한다는점. JSX에선 className으로 사용한다. 만약 그냥 class를 사용하면 JS의 클래스가 나오게 되는 것이다.import logo from './logo.svg';import './App.css';function App() { return ( Edit src/App.js and save to reload. Learn React );}export default App; JSX에서 변수를 이용하고 싶.. 2024. 10. 21. [JS React] Mac 환경에서 설치하기 우선 리액트를 사용하기 위해 Node JS를 설치해준다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 프로젝트를 생성하려는 폴더에 우클릭한 후, '폴더에서 새로운 터미널 열기'를 눌러준다. 이후 해당 문구를 터미널에 넣어준다. sudo npx create-react-app 파일명 이렇게 비밀번호를 요구할 수도 있는데, 그냥 입력해주면 된다. 조금 기다리면 이처럼 완료된다. 그러면 VSCode에 넣어주면 된다. public/App.js를 수정하면 되는데, 맥의 보안 때문에 저장이 안될 수도 있.. 2024. 10. 21. 이전 1 다음 728x90
