sm 기술 블로그

먼저 리액트를 순수한 상태로 만들자. src에 App.css / App.js / index.js를 제외한 것들은 지워주자. 또한 각 파일에 내용을 다음처럼 바꿔주자. // App.css Empty //App.js import './App.css'; function App() { return ( 안녕 ); } export default App; // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to..

src 폴더의 index.js가 입구파일이다. npm run start를 이용해 앱을 구동하면 index를 이용해 화면이 구현된다. //index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a ..

먼저 node.js가 깔려 있어야한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org VScode에서 혹은 해당 디렉터리에서 npx create-react-app 설정하고자하는 프로젝트 이름 다음과 같이 명령어를 실행해주면 다음과 같이 동작할 것이다. 그러면 다음과 같은 파일이 생성되고 리액트를 실행할 수 있는 환경이 셋팅 된것이다.

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. useEffect() 사용법 1. 기본형태 useEffect(function, deps) function : 수행하고자 하는 작업 deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 2. useEffect 함수 불러오기 import React, { useEffect } from 'react'; 3. Component가 mount 됐을 때(처음 나타났을 때) useEffect(() => { console.log('마운트 될 때만 실행된다'); }, []); 마운트 될때 만 (처음에) 실행됨 useEffect(() => { console.log('렌더링 될 때 마다 실행된다')..