리액트 기술면접 대비 (1)

1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? * 상태관리 이유 : 데이터 일관성 / 코드 관리성 / 디버깅 용이성 * 평소 state관리 : (1) state와 props: 컴포넌트 내부 상태(state)와 부모 컴포넌트로부터 전달 받은 props (2) LifeCycle 메소드 : 클래스 컴포넌트에서 상태 업데이트와 같은 사이드 이펙트 관리에 사용 (3) Redux : 전역 상태관리 라이브러리 (4) React Query : 서버상태 관리 라이브러리. 데이터 패칭. 캐싱, 동기화 등 효과적 관리 ▶ 간단한 로컬 상태는 useState로 관리 / 애플리케이션의 전반 상태는 redux / react query 2.Redux가 무엇인가요, 왜 Redux를 사용하시나요? * R..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 5.
• textsms

[리액트 심화] Redux Toolkit 사용하기 (리덕스와 다른점 비교)

1. 리덕스 툴킷이란? - 리덕스를 개량한 것 => 리덕스의 구조와 패러다임은 동일 (새로운 개념 x) - 차이 : 설정 부분 & 모듈 파일! 2. 리덕스 툴킷 설치 방법 (1) 터미널에 yarn으로 추가하기 yarn add @reduxjs/toolkit 3. 코드 비교 (1) configStore.js 비교 [일반 리덕스] import { createStore } from "redux"; import { combineReducers } from "redux"; import counter from "../modules/counter"; const rootReducer = combineReducers({ counter, }); const store = createStore(rootReducer); expo..

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

React : 리덕스로 todolist만들기

0. export default 와 export 차이점 (1) export default 1) 하나의 모듈에서 단 하나의 default 2) import 할때, {중괄호}없이 직접 지정 가능 3) 주요 또는 가장 중요한 기능이나 컴포넌트 보낼때 사용 * export default Home * import Home from './pages' (2) export 1) 하나의 모듈에서 여러개의 named export 가능 2) import할때 {중괄호}에 명시해야함 3) 여러 기능이나 컴포넌트를 하나의 모듈에서 보낼때 사용 * export const myFunction = ()=>{} * import {myFunction} from './pages' 1. 리덕스 설정 (3가지) (1) [Redux - Conf..

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

리액트 팬레터 홈페이지 만들기: 3단계. Redux 리팩토링

0. 2단계 context으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 2단계. contextAPI로 리팩토링 0. 1단계 props-drilling으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료. 1. 필수 요구 사항 styled-components 를 이용하여 스타일링 전역 스타일에 reset.css 를 적용해 zerotonine2da.tistory.com 1. [3단계] 중 [3단계] 구현 & TIL redux 브랜치 : 모두 redux 라이브러리를 이용한 코드로 리팩터링 (1) props처럼 계속 부모>자식 컴포넌트로 전달을 안 해도 되는 장점이 있음 (2) 기존에 받아온 데이터의 형식과 리덕스로 전달받은 값이 약간 달라서 헷갈리는 부분..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 17.
• 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

#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