https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5 저번 포스트에서 컴포넌트를 만들었다. 컴포넌트는 props라는 파라미터를 받을 수 있다. 컴포넌트에 파라미터로 넘기는 props의 이름은 아무렇게 지어도 되지만 일반적으로 "props"라고 이름을 정한다고 한다. //App.js function App() { const topics = [ {id:1, title:'html', body:'html os ...'}, {id:2, title:'css', body:'css os ...'}, {id:3, title:'js', body:'js os ...'}, ] return ( ); } 각 컴포넌트 뒤..

https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4 리액트는 사용자 정의 태그를 만드는 기술이다. //App.js import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html css js Welcome Hello, WEB ); } export default App; 이런 복잡한 코드를 사용자 정의 태그로 깔끔하게 만드는 것이 리액트다. 사용자 정의 태그를 만들 때는 함수를 정의하면 된다. 예전에는 class를 만들어서 사용했다고 하는데 요즘은 함수를 만들어서 사용한다고 한다. 리액트에서 사용자 정의 태..

https://www.youtube.com/watch?v=XQ-XqLVJBwg&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=3 1. 소스 코드 수정하기 리액트를 실행하면 나타나는 화면이다. 위 화면은 프로젝트 폴더의 src/index.js 코드를 불러와서 랜더링 해준 것이다. //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.getEl..

https://www.youtube.com/watch?v=txX3bL22esU&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=2 1. Node.js 설치하기 리액트를 설치하려면 nodejs를 설치하고 npx를 써야한다. npx는 npm의 단점을 해결한 패키지 설치 모듈이라는데 자세한 건 나도 모르겠다. pip와 비슷한 모듈인 것 같다. http://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 홈페이지로 가서 LTS 버전을 다운을 받는다. 설치 방법은 그냥 next 누르고 finish 하기. 2. 리액트 설치하기 Node.js 를..