#03 리액트를 사용한 팬레터 웹사이트 개발 : DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 보이기

▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component) ▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component) ▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 ▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 개인프로젝트 (리액트 팬레 zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 홈 화면 UI: Dummy Data(fakeData.json)를 이용한 리스트 UI 구현 + 멤버별 팬레터 출력 (1) Dummy Data(fakeData.j..

• format_list_bulleted React
• · 2023. 11. 20.
• textsms

#02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component)

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

• format_list_bulleted React
• · 2023. 11. 20.
• textsms

#01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정

개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 프로젝트 셋업 깃허브 브랜치 생성 Router.jsx 설정 전역스타일링 ( GlobalStyle.jsx ) 설정 (1) 프로젝트 셋업 CRA boilerplate 로 프로젝트 생성 : yarn create react-app practice React 안 쓰는 파일 삭제 : logo.svg / reportWeb / Setuptest / App.test.js / App.css [변경] App.jsx & index.jsx: React.StrictMood & reportWebvitals() 삭제 pages/ , components/ , shared/ , assets/ 폴더 작성 및 필요 컴포넌트 사전 작성 styled-components, react-r..

• format_list_bulleted React
• · 2023. 11. 20.
• textsms

React : 리덕스 설정 및 useSeletor

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 폴더 : 리덕..

• format_list_bulleted React
• · 2023. 11. 16.
• textsms

리액트 최적화: React.memo | useCallback | useMemo

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

• format_list_bulleted React
• · 2023. 11. 16.
• textsms

리액트 : Context API (전역에서 데이터 사용)

* props : 부모 > 자식 > 그 자식 > 그 자식의 자식 .... * props drilling 발생 : 이 props가 어떤 컴포넌트로부터 왔는지 파악하기 어려움 + 유지보수 어려움 * useContext : 전역에서 데이터 관리 가능 (1) Context API 필수 개념 3가지 createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달 (to 하위 컴포넌트) (2) 주의 사항 : 렌더링 문제 provider (내 코드에서는 ) 가 제공한 value값이 달라지면 useContext 사용하는 모든 컴포넌트가 리렌더링됨! => 이것의 대안 : 메모이제이션 (3) 코드로 구현 src 폴더 안에 context 폴더 생성 > js..

• format_list_bulleted React
• · 2023. 11. 16.
• textsms