728x90 js3 [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. 이전 1 다음 728x90