#05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공)

0. 어제 실패한 상세페이지 연결 😢😢 #04 리액트 숙련 : 투두리스트의 상세페이지 연결하기 [원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..! 1. Router.js 에서 설정 완료 import { BrowserRouter, Route, zerotonine2da.tistory.com 1. 오늘 연결된 상세페이지 😊😊 [어제 연결이 이상했던 이유] ▶우선 home 화면을 제대로 설정하지 않았음. + App.jsx에서 바로 진행하려고 했음. ▶ react router dom의 사용법 미숙 [구현 정리] 1. App.jsx에서 로 구성하기 2. Home.jsx를 보여주고 싶은 메인화면으로 ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 10.
• textsms

#04 리액트 숙련 : 투두리스트의 상세페이지 연결하기(실패)

[원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..! ▼구현 성공 #05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공) 0. 어제 실패한 상세페이지 연결 😢😢 #04 리액트 숙련 : 투두리스트의 상세페이지 연결하기 [원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되 zerotonine2da.tistory.com 1. Router.js 에서 설정 완료 import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Detail from '../page..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 9.
• textsms

#03 리액트 숙련 : React Redux (+ input 태그로 payload ) 카운터 프로그램 만들기

0. 리액트 리덕트 카운터 프로그램 (input 태그 : payload 하기 전 ) #02 리액트 숙련 :: React Redux 카운터 프로그램 만들기 0. TIL ▶ props의 drilling의 대안으로 스토어에 저장해서 사용하면서 사용하는 리덕스. ▶ 리덕스는 action > dispatch > reducer 순으로 동작한다 ▶ 디스패치를 사용하기 위해서는 useDispatch를 import하고 dis zerotonine2da.tistory.com 1. input에 입력된 값 (useState): 형변환 [+] 버튼을 누르면 string으로 들어와서 0+2 = 2가 아니라 02가 됨 [위치: App.jsx] setNumber(+event.target.value)}> ▶event.target.val..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 8.
• textsms

#02 리액트 숙련 : React Redux 카운터 프로그램 만들기

0. TIL ▶ props의 drilling의 대안으로 스토어에 저장해서 사용하면서 사용하는 리덕스. ▶ 리덕스는 action > dispatch > reducer 순으로 동작한다 ▶ 디스패치를 사용하기 위해서는 useDispatch를 import하고 dispatch의 인자 = action 객체로 넣어주기 ▶ dispatch를 counter.jsx에서 함수로 만들어서 App.jsx에서 함수실행으로 간단하게 사용 가능 [파일 정리] redux 폴더 : 리덕스 관련 모든 코드 (1) config 폴더: 리덕스 설정 관련 파일 전부 (1-1) configStore : 중앙 stata 관리소 -> 설정 코드 (.js) (2) modules 폴더 : state의 그룹 ▼ 리덕스 설정 및 useSeletor로 데이..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 8.
• textsms

#09 리액트 입문 : 1차로 만들었던 todolist 리팩토링

1. 처음으로 만들었던 투두리스트 [2023.11.06] 리팩토링 ! https://zerotonine2da.tistory.com/64 #08 리액트 입문 :: todolist 만들기 (리액트 컴포넌트 분리) TIL 리액트로 투두리스트를 구현하면서, JSX문법 사용과 랜더링에 대해 배울 수 있었다. 리랜더링이 끝나는 시점에 대해 알 수 있었고, useState를 사용하여 리액트에게 변경값을 알려주는 개념을 zerotonine2da.tistory.com 2. 개선 내용 1. 태그의 onSubmit 사용 2. id값 = uuid 사용 3. Working과 Done부분을 하나의 컴포넌트 로 만들기 --중복 줄이기 - 기존에는 Contents라는 컴포넌트 안에 (Working + Done부분을 2개의 DIV태그..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 8.
• textsms

#01 리액트 숙련 : React Hooks 사용해서 input 태그 포커스 옮기기

#미션! 아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하도록 코드를 짜보세요. 0. TIL ▶ useRef만 사용하면 가능하다고 생각했었는데, 딱 1번만 가능하고 새로고침을 하지 않으면 안 되었음. useEffect와 useRef를 함께 써야하는 것을 알게 되었음. ▶태그에 onChange 이벤트 부분에서 length를 구하는 것은 배치 업데이트와 관련됨! 이 부분은.. setId에 바로 반영이 되지 않고, 리랜더링이 끝나는 시점인 함수 끝나고 재호출되는 시점이였던거랑 유사한 것 같다..! 1. 내가 생각한 코드 import { useRef } from 'react'; function App() { const idRef = useRef(''); const pwRef = useRef(''); c..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 7.
• textsms