일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프로그래머스
- typeScript
- 한글 공부 사이트
- Next 팀 프로젝트
- 내배캠 프로젝트
- 내일배움캠프 프로젝트
- 리액트 팀 프로젝트
- 코딩테스트
- 내일배움캠프 최종 프로젝트
- 파이썬 반복문
- React Hooks
- js
- REACT
- useState
- 리액트 훅
- 리액트 프로젝트
- 리액트
- JavaScript
- 파이썬 for
- 타입스크립트 props
- 자바스크립트
- 파이썬 for in
- 파이썬 slice
- 타입스크립트 리액트
- 파이썬 list
- 파이썬 enumerate
- 타입스크립트
- 리액트 페이지 이동
- 내일배움캠프
- 그리드 정렬
- Today
- Total
목록React (55)
aotoyae
🚨 ERROR App.jsx 에서 store import 를 해오면서 경로가 자동완성이 되었는데, 이 때문에 에러가 떴다. redux 앞에 ./ 를 붙여주니 잘 실행됐다. 절대경로를 쓸 때 자동완성으로 경로를 불러와도 이런 에러가 가끔 생긴다.. 그래도 고쳐가면서 에러 하나씩 없애니 해결해가는 방법을 배운 거 같다.
🥵 팀 프로젝트를 하다 알게 된 Link 문제점..! btn 을 클릭했을 때나 엔터를 눌렀을 때 form 태그에 걸어둔 함수가 실행되고, Link(btn) 을 클릭하면 페이지가 이동되도록 했는데! Link 가 먼저 실행되어 form 에 걸어둔 함수가 실행되지 않았다. 그래서 반대로도 감싸보고 했지만.. ❗️ Link 에 onClick 도 넣어봤는데 그럼 페이지 이동이 되지 않는다. 결국 Link 는 지우고, 실행 할 함수에 마지막에 navigate 를 써서 페이지 이동을 하게 했다!
💡 useState : 컴포넌트 상태 관리 훅 리렌더링이 꼭 필요한 값을 다룰 때 사용, 렌더링이 일어나면 내부 변수들 초기화 (버튼이 눌리면 숫자가 올라가야할 때!) 💡 useRef : DOM 요소에 접근할 수 있도록 하는 훅 state 와 비슷하게 저장한다는 느낌. 리렌더링을 발생시키지 않는 값을 저장할 때 사용, 내부 변수 초기화 XXX import { useRef, useState } from "react"; function RefApp() { const ref = useRef(""); const [value, setValue] = useState(""); console.log("hi"); return ( state : { setValue(event.target.value); }} /> ref :..
💡 리액트에서 api 데이터를 가져와보자! import { useEffect, useState } from "react"; function JsonApp() { const [data, setData] = useState([]); {/*데이터 들어갈 곳 초기 설정*/} useEffect(() => { fetch(`https://jsonplaceholder.typicode.com/posts`) .then((response) => response.json()) .then((json) => { setData([...json]); {/*가져온 json 복사해 데이터 갱신*/} return console.log(json); }); }, []); return ( {data.map((item) => ( {/*가져온 데..
💡동적 라우팅 Dynamic Route path 에 유동적인 값을 넣어 특정 페이지로 이동하게끔 구현한 방법 이렇게 페이지들을 하나씩 지정해주는게 아니라 works/ 뒤 숫자들을 유동적으로 파라미터로 받아 오게 해보자! 1. 먼저 Router.js 에서 works/:id 를 적어준다. 2. Work.js 에서 useParams 를 연결 그럼 이동한 페이지의 id 를 얻을 수 있다! Router.js 에서 넣어준 id 가 객체에 들어가 있다. const { id } = useParams(); // 이런 식으로 가져올 수 있다. 3. 테스트 할 데이터 파일을 하나 만든다. Data.js export const data = [ { id: 1, todo: "리액트 공부", }, { id: 2, todo: "노드..
💡리액트 라우터 돔을 활용해 보자 1. 페이지 컴포넌트 작성 ➡️ 다중 페이지(우리는 원래 단일 페이지) 2. Router.js 파일 생성, router 를 구성하는 설정 코드 작성 ex) redux 할 때도 설정 파일을 만들어서 연결했다. 3. App.jsx import 하고(2번) 적용 : 연결(주입) 4. 페이지 이동 테스트 먼저 터미널에 npm add react-router-dom ~ 1. 페이지 컴포넌트 작성 2. Router.js 파일 생성 & router 구성하는 설정 코드 작성 - BrowserRoutr, Route, Routes 셋을 import 해온다 - 각 페이지들도 import - Route 에 페이지 연결 path="/" 이 부분은 url 뒤 들어가는 부분, 이동할 주소! impo..
[React] Redux : useSelector, useDispatch, 중앙 데이터 관리 💡 리덕스를 활용해 보자~ props 를 넘겨주는 방식은 계속 지나쳐가는(props 를 넘겨주기만 하는) 컴포넌트가 생길 수 있다. 중앙 데이터 관리소 store 를 만들어서 데이터를 한번에 가져올 수 있도 aotoyae.tistory.com 이어서.. 위 글에서 action 객체에 type 만 넘겨주고 있는데 만약 input 을 만들어서 숫자를 받고, 버튼 클릭시 그 숫자만큼 증가하거나 감소하게 만들고 싶다면? 💡 action 객체에 payload 를 추가한다. action 객체는 action type 을 payload 만큼 처리하는 것이다. payload 가 3이면, 3만큼을 plus 먼저 counter.js..
💡 리덕스를 활용해 보자~ props 를 넘겨주는 방식은 계속 지나쳐가는(props 를 넘겨주기만 하는) 컴포넌트가 생길 수 있다. 중앙 데이터 관리소 store 를 만들어서 데이터를 한 번에 가져올 수 있도록 연결해 주자. 먼저 설치 ~ 터미널에 ~ npm add redux react-redux - redex 폴더 : 리덕스 관련 모든 코드들이 들어가는 곳 - config 폴더 : 리덕스 설정 관련 파일이 들어가는 곳 - configStore.js : 중앙 state(data) 관리소 - modules 폴더 : state 의 그룹! Todolist 라면 Todo.js 등 configStore.js import { createStore } from "redux"; // 새 스토어를 만들어 줄 API im..