본문 바로가기
728x90
반응형

분류 전체보기404

리액트에서 서버와 통신하려면 ajax 1 보호되어 있는 글 입니다. 2024. 5. 22.
Lifecycle과 useEffect 2 보호되어 있는 글 입니다. 2024. 5. 21.
[리액트] Mount 하고 Update 차이 비교 Mount (마운트)Mount는 컴포넌트가 "처음" 화면에 나타나는 순간을 말해.마치 레고 블록을 처음 조립해서 방에 놓는 것처럼, 컴포넌트가 처음으로 화면에 나타나는 거야.예를 들어, 너가 그림을 그리고 그 그림을 벽에 처음 붙이는 순간이 바로 컴포넌트의 "마운트"야.이때, 컴포넌트는 필요한 준비 작업을 할 수 있어.마치 그림을 벽에 걸기 전에 액자에 넣는 것처럼 말이야.Update (업데이트)Update는 이미 화면에 나타나 있는 컴포넌트가 다시 그려지는 순간을 말해.마치 레고 블록으로 만든 건물에 새로운 블록을 추가하거나, 기존 블록을 바꾸는 것처럼.예를 들어, 벽에 걸어둔 그림을 다시 꺼내서 색칠을 더하거나, 그림을 수정하는 순간이 "업데이트"야.컴포넌트는 필요할 때마다 업데이트가 일어나서 최신 .. 2024. 5. 21.
Lifecycle과 useEffect 1 보호되어 있는 글 입니다. 2024. 5. 21.
styled-components 쓰면 CSS 파일 없어도 되는데 보호되어 있는 글 입니다. 2024. 5. 21.
리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기 보호되어 있는 글 입니다. 2024. 5. 20.
리액트 라우터 2 : navigate, nested routes, outlet 보호되어 있는 글 입니다. 2024. 5. 20.
[리액트] - 라우터 설치와 사용 라우터url 마다 페이지 구분.페이지 구분하는 것 = 라우팅 react-router-dom 설치 터미널 열어서 npm install react-router-dom@6 입력해서 설치설치가 잘 됐으면 npm start 해주기.import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );index.js 파일로 가서App 에다가 BrowserRouter 을 감싸주면 끝 import도 상단에 해주기라우터 사용하기App.js 파일에서 import 해주기. 'react-router-dom' 여기서 몇가지 컴.. 2024. 5. 19.
[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 다른 js 파일에 있는 html을state에 보관해 놓고 html에 데이터 바인딩하기- export / importdata.js 에 있는 html 이 담긴 변수 data 를 App.js 로 옮기기export default 변수명;  - 변수 1개 할 경우,export {변수1, 변수2}; - 변수 2개 이상 할 경우 (default 사용 안함)//data.js에 있는 것let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000, }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000, .. 2024. 5. 19.
728x90
반응형

티스토리툴바