RRD ( React - Router - Dom ) 이란? 리액트 라우터는 화면 전환을 도와주는 역할 웹에서 a tag를 통해 다른 페이지로 이동한다면, React에서는 React-Router을 통해 Link 태그를 사용하여 화면을 전환합니다. 일반적으로 웹에서 a tag를 통해서 새로고침이 되며 이동하는걸 MPA (Multi Page Application)이라고 하고 React 같은 경우를 SPA(Single Page Application, CSR(Cliend Side Rendering)이라고 합니다. BrowserRouter 이란? Link Component를 to 속성에 이동할 경로를 작성 Route Component path 속성을 Link의 to 속성과 매핑 component의 컴포넌트 경로 기..
React 하면서 가장 중요하다고도 할수있는 LifeCycle useEffect 에 대해 공부한대로 한번 글을 써볼 예정 입니다. React Component의 LifeCycle (생명 주기) 라고 하는것은 Mount ( 탄생 ) --> Update ( 변화 ) --> UnMount ( 죽음 ) 이라고 하는데요. Mount는 즉 Component가 생성 되었을때 최초 한번 실행이 되는것이며 Update는 Component가 리랜더링 될때마다 실행이 되는것이며 UnMount는 Component가 없어지거나 사라질때 실행이 되는것입니다. 각각 상황에 따라 useEffect를 사용할수있는데 보통 Mount 즉 Component 가 Mount가 될때 초기화를 보통 시킵니다. useEffect(() => { //..
리액트를 공부하다 보면 uesRef를 공부하게 될건데 useRef 는 JavaScript를 사용할때, 특정 DOM 을 컨트롤하기 위해 사용합니다, 주로 vanillaJS에서 document.querySelector, document.getElementById 와 같은것입니다. 간단한 예제를 보면서 확인을 해보도록 할게요. import { useState, useRef } from "react"; function App() { const [userID, setUserID] = useState(""); const [userPW, setUserPW] = useState(""); const handleChangeID = (e) => { setUserID(e.target.value); }; const handle..
이 포스트를 쓰기 전에 여러 블로그 포스트를 보고 왔습니다. https://velog.io/@autumndr3ams/210802-React-Node.jsexpress-연결하기 https://baegofda.tistory.com/210 https://baegofda.tistory.com/211 일단 Node.js 가 설치되어 있다는 가정하에 진행을 하겠습니다. 1. 일단 작업 할 폴더(testReact)를 만든 뒤 cmd 또는 파워쉘을 키고 npx create-react-app client 를 쳐줍니다. 다음과 같이 나왔다면 제대로 설치된 것 입니다. 2. 그럼 폴더에 client 폴더가 있을건데 전 testReact 라는 폴더에 만들었으니 testReact 라는 폴더안에서 커맨드 창을 열고 server을..
보통 처음에 state를 배우고 나면 props 개념을 배우게 됩니다. props는 보통 상단 componet에서 하단 component에게 이름을 붙여 값을 전달하는 방식이며 여러 데이터를 넘길수 있습니다. Props를 사용하는 이유는 상단 컴포넌트에서 하단 컴포넌트에게 데이터를 이동시켜주기 위함입니다. App.js import React from "react"; import MyHeader from "./components/MyHeader"; import Counter from "./components/Counter"; function App() { return ( ); } export default App; Counter.js import React, { useState } from "react";..
전에 봤던 vanilla js 의 counter 프로그램을 React로 만든다고 한다면, App.js import React from "react"; import Counter from "./components/Counter" function App() { return ( ); } export default App; 기본적으로 Counter 이라는 Component 를 이용하여 count increment, decrease 를 하는 코드를 만들어 볼것입니다. Component.js import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () ..
