▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 ▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 프로젝트 셋업 깃허브 브랜치 생성 Router.jsx 설정 전역스타일링 ( GlobalStyle.jsx ) 설정 (1) 프로젝트 셋업 CRA boilerplate 로 프로젝트 생성 : zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 홈 화면 UI: 배너 및 헤더 파트 UI 구현 (1) 홈 화면 UI 구현 : 기본틀 import AddForm from 'components/AddForm'; import Header from..

0. State (1) Local State (지역상태) : 컴포넌트에서 useState를 이용해서 생성된 state (2) Global State (전역상태) : 중앙 state 관리소 (props로 전달하지 않아도 사용 가능함) 1. 리덕스란? - "중앙 state 관리소"를 접근&제어 가능한 패키지(라이브러리) => yarn | npm으로 설치해야함 - 전역상태를 관리한다 2. 리덕스 설정 (1) 터미널에서 패키지 설치 : yarn add redux & yarn add react-redux 2개 설치 => yarn add redux react-redux (2) src 폴더 아래 redux 폴더 생성 (3) redux 폴더 안에 config 폴더 / modules 폴더 생성 (redux 폴더 : 리덕..

provider (내 코드에서는 ) 가 제공한 value값이 달라지면 useContext 사용하는 모든 컴포넌트가 리렌더링됨! => 이것의 대안 : 메모이제이션 ▼ 아래 포스팅이 context API 내용 ▼ 리액트 : Context API (전역에서 데이터 사용) * props : 부모 > 자식 > 그 자식 > 그 자식의 자식 .... * props drilling 발생 : 이 props가 어떤 컴포넌트로부터 왔는지 파악하기 어려움 + 유지보수 어려움 * useContext : 전역에서 데이터 관리 가능 (1) Context zerotonine2da.tistory.com [리-렌더링의 발생 조건] 컴포넌트에서 state 변경시 컴포넌트가 내려받은 props가 변경시 부모 컴포넌트가 리-렌더링 되면 자식..

0.TIL ▶ useState만 사용해서 Router 구현은 Router.js 에서 모든 Route마다 props로 데이터를 전달해야함. ▶ 메인페이지 -> 상세페이지 -> 상세페이지의 업데이트 페이지 이렇게 이동하도록 구현을 알기까지 삽질함. ▶ 데이터를 업데이트 하기 위해서는 2가지로 나눔 (데이터 변경 & 수정완료 시 처리) --> 이 부분을 한 번에 처리하려고해서 시간을 너무 버렸음...😢안 될때는 나눠서 생각하면 편리함. 1. 화면 1. 등록된 댓글의 "하니"를 클릭시 상세페이지 이동 2. 상세페이지에서 [수정] 버튼 클릭하여 버튼 재 클릭시 수정완료 ( 버튼 명칭은 변경예정 "수정수정완료") 3. [홈으로] 버튼 클릭하여 돌아가면 수정된 데이터 확인 가능 2. 코드 const param = u..

0. TIL ▶ useState 함수로 사용 장점은 함수로 useState 사용시 props를 받을 필요가 없음 ▶ setState만 있어도 매개변수(prev)로 데이터(comments)를 가져올 수 있음 const [number, setNumber] = useState(0); ▶ 함수형 업데이트: setNumber(()=>{}) ▶ setNumber( (현재값(prev) =>{ return prev +1 }) = setNumber(number +1) : ▶결과는 같지만 차이점이 있음!! (동일 코드 3번 실행했을ㄸㅐ) (1) 기존 값 setNumber(number +1) - 배치성으로 업데이트 진행 (변경된 사항을 한번에 모아서 1번만 업데이트) setNumber(number +1) setNumber(..

[원하는 기능]: 투두리스트의 상세페이지 만들기 -> 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..