멍멍이코더

1. 상태 관리의 중요성 우선 상태관리가 왜 필요한지 알아야 했다. 리액트는 단반향으로 바인딩을 하는 라이브러리이기 때문에 부모 -> 자식 방향으로만 state를 props로 전달할수 있고, 자식의 props를 부모에게 전달하는 방법은 존재하지 않는다. 대신 자식 컴포넌트에서 부모 컴포넌트의 state를 바꿀 수 있는 방법들이 존재한다. 1. 자식에게 부모의 state를 modify 할 수 있는 setState 함수를 props로 넘겨준다. 2. React 에서 자체적으로 제공하고 있는 Context API 3. State Management Tool(redux, recoil, ...) Parent.js import React, { useState } from "react"; import Children..

React Router v6 튜토리얼 이 내용은 해당 블로그의 내용을 정리 및 요약하였습니다. 1. 라우팅이란? 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것. 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 방법 2가지 리액트 라우터 (React Router) Next.js - Next.js는 리액트 프로젝트의 프레임워크. 이 프레임워크는 우리가 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능들을 제공한다. 이 프레임워크 라우팅 시스템은 파일 경로 기반으로 작동한다. 이 프레임워크는 리액트 라우터의 대안으로 많이 사용되고 있다. 리액트 라우터를 사용하면 손쉽게 리액트 라..

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..