멍멍이코더

Component 리액트는 사용자 정의 태그를 만드는 기술이다. 우리는 이러한 사용자 정의 태그를 'Component' 즉, 컴포넌트라고 부른다. function App() { return ( // 헤더 영역 HEADER // 내비게이션 영역 html css js // 아티클 영역 Welcome Hello, WEB ); } export default App; 이런 기본 HTML 코드가 있다. 하지만 코드가 길어지게 되면 웹 페이지가 어떻게 생겼는지 파악하기가 쉽지 않을 것이다. 이렇게 어지러진 코드는 아래와 같이 Header, Nav, Article 컴포넌트를 이용해서 분리시킬수 있다. 💡 컴포넌트는 반드시 대문자로 시작해야 한다. function Header(props) { console.log(pro..

UseEffect import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value) console.log("i run all the time..."); return ( {counter} click me ); } export default App; 버튼을 Click할 때마다 컴포너트가 Re-Rendering되어 con..

😎 이전게시글 2023.03.08 - [개발/React] - React App 만들기(1) - 프로젝트 생성 1. Button 컴포넌트 생성 src 폴더 하위에 text를 props로 가지는 Button.js 파일을 생성한다. function Button({text}) { return ( {text} ) } // App.js에서 import 하기위해 해당 코드를 추가한다. export default Button; Button 컴포넌트를 App.js에 import한다. 컴포넌트는 무조건 대문자로 시작해야 한다! import Button from "./Button"; function App() { return ( ); } export default App; 2. Props 타입 설정하기 prop-types ..

1. nodejs 설치 1) nodejs 공식사이트에서 각각의 OS에 맞는 버전을 다운로드하여 설치한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) node -v 커맨드를 통해 설치가 잘 되었는지 확인한다. > node -v v18.12.1 3) npx 명령어가 잘 동작하는지 확인한다. > npx Entering npm script environment at location: /Users/user/Desktop Type 'exit' or ^D when finished npx 란? 자바스크립트 패키지 관리 모듈인 npm(Node Packag..